@rokku-x/react-hook-loading-spinner 0.2.1 → 0.2.5

package/README.md

@@ -20,7 +20,6 @@ npm install @rokku-x/react-hook-loading-spinner
 - 📡 **Event System** - Subscribe to loading state changes
 - ♿ **Accessibility** - Built-in inert attribute and scroll prevention
 - 📱 **Zero Dependencies** - Only requires React and Zustand
-- 🌐 **SSR-Compatible** - Hooks work in SSR; use `ssrLoading` helper in Server Components
 
 ## Bundle Size
 
@@ -397,28 +396,9 @@ function App() {
         loadingComponentScale={1.5}
       />
     </>
-
-### SSR Usage
-
-For Server Components, use the SSR-safe helper instead of the client hook:
-
-```tsx
-import { ssrLoading } from '@rokku-x/react-hook-loading-spinner';
-
-export default function ServerComponent() {
-  const { startLoading, stopLoading, isLoading } = ssrLoading();
-
-  startLoading();
-  // ...run your server-side work
-  stopLoading();
-
-  return <div>{isLoading ? 'Loading…' : 'Done'}</div>;
-}
-```
-
-For Client Components, continue using `useLoading` as shown above.
   );
 }
+}
 ```
 
 ### Example 7: Fade Animation

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),O=require("crypto"),L=require("react/jsx-runtime"),A=require("react-dom"),y=n=>{let t;const e=new Set,o=(s,l)=>{const d=typeof s=="function"?s(t):s;if(!Object.is(d,t)){const p=t;t=l??(typeof d!="object"||d===null)?d:Object.assign({},t,d),e.forEach(m=>m(t,p))}},r=()=>t,f={setState:o,getState:r,getInitialState:()=>b,subscribe:s=>(e.add(s),()=>e.delete(s))},b=t=n(o,r,f);return f},R=(n=>n?y(n):y),$=n=>n;function F(n,t=$){const e=a.useSyncExternalStore(n.subscribe,a.useCallback(()=>t(n.getState()),[n,t]),a.useCallback(()=>t(n.getInitialState()),[n,t]));return a.useDebugValue(e),e}const x=n=>{const t=R(n),e=o=>F(t,o);return Object.assign(e,t),e},k=(n=>n?x(n):x);class C extends EventTarget{constructor(){super(...arguments),this.controller=new AbortController}on(t,e){return this.addEventListener(t,o=>e(o.detail),{signal:this.controller.signal}),this}once(t,e){return this.addEventListener(t,o=>e(o.detail),{signal:this.controller.signal,once:!0}),this}emit(t,e){return this.dispatchEvent(new CustomEvent(t,{detail:e}))}removeAllListeners(){this.controller.abort(),this.controller=new AbortController}}const g=new C,v=k()((n,t)=>({loadingCount:0,overrideState:null,localCounters:{},isLoading(){return t().overrideState??t().loadingCount>0},actions:{isGlobalLoading(){return t().isLoading()},startLoading:e=>{const o=t().isLoading();n(i=>({loadingCount:i.loadingCount+1})),e&&n(i=>({localCounters:{...i.localCounters,[e]:(i.localCounters[e]??0)+1}}));const r=t().isLoading();r&&!o&&g.emit("start",null),g.emit("change",{isLoading:r,isOverrideState:t().overrideState!==null})},stopLoading:e=>{const o=t().isLoading(),r=e?t().localCounters[e]??0:0;e&&r>0&&n(u=>({loadingCount:Math.max(0,u.loadingCount-1),localCounters:{...u.localCounters,[e]:Math.max(0,u.localCounters[e]-1)}}));const i=t().isLoading();!i&&o&&g.emit("stop",null),g.emit("change",{isLoading:i,isOverrideState:t().overrideState!==null})},overrideLoading:e=>{const o=t().isLoading();n({overrideState:e});const r=t().isLoading();r&&!o?g.emit("start",null):!r&&o&&g.emit("stop",null),g.emit("change",{isLoading:r,isOverrideState:e!==null})},getLocalCounter:e=>t().localCounters[e]??0,isLocalLoading:e=>(t().localCounters[e]??0)>0}}));function w(){const n=a.useId(),{actions:t}=v(i=>i),e=()=>{t.startLoading(n)},o=()=>{t.isLocalLoading(n)&&t.stopLoading(n)},r=async i=>{e();try{return await i}finally{o()}};return{overrideLoading:t.overrideLoading,startLoading:e,stopLoading:o,get isLocalLoading(){return t.isLocalLoading(n)},asyncUseLoading:r,get isLoading(){return t.isGlobalLoading()}}}function M(){const n=O.randomUUID(),{actions:t}=v(i=>i),e=()=>{t.startLoading(n)},o=()=>{t.isLocalLoading(n)&&t.stopLoading(n)},r=async i=>{e();try{return await i}finally{o()}};return{overrideLoading:t.overrideLoading,startLoading:e,stopLoading:o,get isLocalLoading(){return t.isLocalLoading(n)},asyncUseLoading:r,get isLoading(){return t.isGlobalLoading()}}}const c={Spin:"spin",FadeInOut:"fadeInOut",None:"none"},N=({scale:n=1,animationType:t=c.Spin,animationDuration:e,children:o,style:r,className:i,id:u,prefix:f})=>{const b=t,s=t===c.Spin?1:t===c.FadeInOut?2:0,l=e||s,d=t===c.Spin?"linear":t===c.FadeInOut?"ease-in-out":"linear",p=t===c.None?"none":`${f}-${b} ${l}s ${d} infinite`;return L.jsx("div",{style:{animation:p,...n!==1?{zoom:n}:{},...r},className:i,id:u,children:o})},E=n=>L.jsx("div",{id:"loading-circle",style:{width:"90px",height:"90px",border:"15px solid #f3f3f3",borderTop:"15px solid #009b4bff",borderRadius:"50%",boxSizing:"border-box"},...n}),I=n=>L.jsx("div",{style:{padding:"20px",fontSize:"25px",color:"#333",fontFamily:"system-ui, sans-serif"},...n,children:"Please wait..."});function P({loadingComponent:n,loadingComponentScale:t=1,animationType:e=c.Spin,animationDuration:o,wrapperStyle:r,wrapperClassName:i,wrapperId:u,animationWrapperStyle:f,animationWrapperClassName:b,animationWrapperId:s}){n=n||(e===c.Spin?E:I);const l=a.useRef(Math.random().toString(36).substring(2,6).replace(/[0-9]/g,"")),{loadingCount:d,overrideState:p}=v(j=>j),m=p??d>0,S=a.useRef(null);a.useEffect(()=>{m?(S.current?.showModal(),document.body.setAttribute("inert","")):(S.current?.close(),document.body.removeAttribute("inert"))},[m]);const h=u||"loading-wrapper-"+l.current;return m?A.createPortal(L.jsxs(L.Fragment,{children:[L.jsx("style",{children:`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),L=require("react/jsx-runtime"),O=require("react-dom"),v=e=>{let t;const n=new Set,o=(a,l)=>{const d=typeof a=="function"?a(t):a;if(!Object.is(d,t)){const m=t;t=l??(typeof d!="object"||d===null)?d:Object.assign({},t,d),n.forEach(p=>p(t,m))}},i=()=>t,f={setState:o,getState:i,getInitialState:()=>b,subscribe:a=>(n.add(a),()=>n.delete(a))},b=t=e(o,i,f);return f},A=(e=>e?v(e):v),R=e=>e;function $(e,t=R){const n=s.useSyncExternalStore(e.subscribe,s.useCallback(()=>t(e.getState()),[e,t]),s.useCallback(()=>t(e.getInitialState()),[e,t]));return s.useDebugValue(n),n}const x=e=>{const t=A(e),n=o=>$(t,o);return Object.assign(n,t),n},F=(e=>e?x(e):x);class y extends EventTarget{constructor(){super(...arguments),this.controller=new AbortController}on(t,n){return this.addEventListener(t,o=>n(o.detail),{signal:this.controller.signal}),this}once(t,n){return this.addEventListener(t,o=>n(o.detail),{signal:this.controller.signal,once:!0}),this}emit(t,n){return this.dispatchEvent(new CustomEvent(t,{detail:n}))}removeAllListeners(){this.controller.abort(),this.controller=new AbortController}}const g=new y,C=F()((e,t)=>({loadingCount:0,overrideState:null,localCounters:{},isLoading(){return t().overrideState??t().loadingCount>0},actions:{isGlobalLoading(){return t().isLoading()},startLoading:n=>{const o=t().isLoading();e(r=>({loadingCount:r.loadingCount+1})),n&&e(r=>({localCounters:{...r.localCounters,[n]:(r.localCounters[n]??0)+1}}));const i=t().isLoading();i&&!o&&g.emit("start",null),g.emit("change",{isLoading:i,isOverrideState:t().overrideState!==null})},stopLoading:n=>{const o=t().isLoading(),i=n?t().localCounters[n]??0:0;n&&i>0&&e(u=>({loadingCount:Math.max(0,u.loadingCount-1),localCounters:{...u.localCounters,[n]:Math.max(0,u.localCounters[n]-1)}}));const r=t().isLoading();!r&&o&&g.emit("stop",null),g.emit("change",{isLoading:r,isOverrideState:t().overrideState!==null})},overrideLoading:n=>{const o=t().isLoading();e({overrideState:n});const i=t().isLoading();i&&!o?g.emit("start",null):!i&&o&&g.emit("stop",null),g.emit("change",{isLoading:i,isOverrideState:n!==null})},getLocalCounter:n=>t().localCounters[n]??0,isLocalLoading:n=>(t().localCounters[n]??0)>0}}));function w(){const e=s.useId(),{actions:t}=C(r=>r),n=()=>{t.startLoading(e)},o=()=>{t.isLocalLoading(e)&&t.stopLoading(e)},i=async r=>{n();try{return await r}finally{o()}};return{overrideLoading:t.overrideLoading,startLoading:n,stopLoading:o,get isLocalLoading(){return t.isLocalLoading(e)},asyncUseLoading:i,get isLoading(){return t.isGlobalLoading()}}}const c={Spin:"spin",FadeInOut:"fadeInOut",None:"none"},k=({scale:e=1,animationType:t=c.Spin,animationDuration:n,children:o,style:i,className:r,id:u,prefix:f})=>{const b=t,a=t===c.Spin?1:t===c.FadeInOut?2:0,l=n||a,d=t===c.Spin?"linear":t===c.FadeInOut?"ease-in-out":"linear",m=t===c.None?"none":`${f}-${b} ${l}s ${d} infinite`;return L.jsx("div",{style:{animation:m,...e!==1?{zoom:e}:{},...i},className:r,id:u,children:o})},E=e=>L.jsx("div",{id:"loading-circle",style:{width:"90px",height:"90px",border:"15px solid #f3f3f3",borderTop:"15px solid #009b4bff",borderRadius:"50%",boxSizing:"border-box"},...e}),j=e=>L.jsx("div",{style:{padding:"20px",fontSize:"25px",color:"#333",fontFamily:"system-ui, sans-serif"},...e,children:"Please wait..."});function M({loadingComponent:e,loadingComponentScale:t=1,animationType:n=c.Spin,animationDuration:o,wrapperStyle:i,wrapperClassName:r,wrapperId:u,animationWrapperStyle:f,animationWrapperClassName:b,animationWrapperId:a}){e=e||(n===c.Spin?E:j);const l=s.useRef(Math.random().toString(36).substring(2,6).replace(/[0-9]/g,"")),{loadingCount:d,overrideState:m}=C(I=>I),p=m??d>0,S=s.useRef(null);s.useEffect(()=>{p?(S.current?.showModal(),document.body.setAttribute("inert","")):(S.current?.close(),document.body.removeAttribute("inert"))},[p]);const h=u||"loading-wrapper-"+l.current;return p?O.createPortal(L.jsxs(L.Fragment,{children:[L.jsx("style",{children:`
                         dialog#${h}[open] {
                             display: flex !important;
                             justify-content: center;
@@ -22,4 +22,4 @@
                         body {
                             scrollbar-gutter: stable;
                         }
-                    `}),L.jsx("dialog",{ref:S,style:{border:"none",padding:0,backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(2px)",...r},className:i,id:h,children:L.jsx(N,{scale:t,animationType:e,animationDuration:o,style:f,className:b,id:s,prefix:l.current,children:a.isValidElement(n)?n:a.createElement(n)})})]}),document.body):null}function q({isLoading:n=!1}){const{startLoading:t,stopLoading:e}=w();return a.useEffect(()=>(n?t():e(),()=>{n&&e()}),[n]),null}exports.AnimationType=c;exports.EventEmitter=C;exports.Loading=q;exports.LoadingCircle=E;exports.LoadingPleaseWait=I;exports.LoadingRenderer=P;exports.loadingEventTarget=g;exports.ssrLoading=M;exports.useLoading=w;
+                    `}),L.jsx("dialog",{ref:S,style:{border:"none",padding:0,backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(2px)",...i},className:r,id:h,children:L.jsx(k,{scale:t,animationType:n,animationDuration:o,style:f,className:b,id:a,prefix:l.current,children:s.isValidElement(e)?e:s.createElement(e)})})]}),document.body):null}function N({isLoading:e=!1}){const{startLoading:t,stopLoading:n}=w();return s.useEffect(()=>(e?t():n(),()=>{e&&n()}),[e]),null}exports.AnimationType=c;exports.EventEmitter=y;exports.Loading=N;exports.LoadingCircle=E;exports.LoadingPleaseWait=j;exports.LoadingRenderer=M;exports.loadingEventTarget=g;exports.useLoading=w;

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export { default as useLoading } from './hooks/useLoading';
-export { default as ssrLoading } from './hooks/ssrLoading';
 export { LoadingCircle, LoadingPleaseWait, AnimationType } from './components/LoadingRenderer';
 export type { AnimationType as AnimationTypeType } from './components/LoadingRenderer';
 export { default as Loading } from './components/Loading';

package/dist/index.esm.js

@@ -1,60 +1,59 @@
 "use client";
-import L, { useId as E, useRef as y, useEffect as w } from "react";
-import { randomUUID as O } from "crypto";
-import { jsx as f, jsxs as $, Fragment as j } from "react/jsx-runtime";
-import { createPortal as A } from "react-dom";
-const x = (n) => {
+import L, { useId as E, useRef as v, useEffect as C } from "react";
+import { jsx as f, jsxs as O, Fragment as $ } from "react/jsx-runtime";
+import { createPortal as j } from "react-dom";
+const y = (n) => {
   let t;
-  const o = /* @__PURE__ */ new Set(), e = (a, s) => {
-    const l = typeof a == "function" ? a(t) : a;
+  const e = /* @__PURE__ */ new Set(), o = (s, a) => {
+    const l = typeof s == "function" ? s(t) : s;
     if (!Object.is(l, t)) {
-      const p = t;
-      t = s ?? (typeof l != "object" || l === null) ? l : Object.assign({}, t, l), o.forEach((b) => b(t, p));
+      const m = t;
+      t = a ?? (typeof l != "object" || l === null) ? l : Object.assign({}, t, l), e.forEach((p) => p(t, m));
     }
-  }, r = () => t, g = { setState: e, getState: r, getInitialState: () => m, subscribe: (a) => (o.add(a), () => o.delete(a)) }, m = t = n(e, r, g);
+  }, i = () => t, g = { setState: o, getState: i, getInitialState: () => b, subscribe: (s) => (e.add(s), () => e.delete(s)) }, b = t = n(o, i, g);
   return g;
-}, F = ((n) => n ? x(n) : x), k = (n) => n;
-function N(n, t = k) {
-  const o = L.useSyncExternalStore(
+}, A = ((n) => n ? y(n) : y), F = (n) => n;
+function k(n, t = F) {
+  const e = L.useSyncExternalStore(
     n.subscribe,
     L.useCallback(() => t(n.getState()), [n, t]),
     L.useCallback(() => t(n.getInitialState()), [n, t])
   );
-  return L.useDebugValue(o), o;
+  return L.useDebugValue(e), e;
 }
-const C = (n) => {
-  const t = F(n), o = (e) => N(t, e);
-  return Object.assign(o, t), o;
-}, R = ((n) => n ? C(n) : C);
-class M extends EventTarget {
+const x = (n) => {
+  const t = A(n), e = (o) => k(t, o);
+  return Object.assign(e, t), e;
+}, N = ((n) => n ? x(n) : x);
+class R extends EventTarget {
   constructor() {
     super(...arguments), this.controller = new AbortController();
   }
-  on(t, o) {
+  on(t, e) {
     return this.addEventListener(
       t,
-      (e) => o(e.detail),
+      (o) => e(o.detail),
       { signal: this.controller.signal }
     ), this;
   }
-  once(t, o) {
+  once(t, e) {
     return this.addEventListener(
       t,
-      (e) => o(e.detail),
+      (o) => e(o.detail),
       {
         signal: this.controller.signal,
         once: !0
       }
     ), this;
   }
-  emit(t, o) {
-    return this.dispatchEvent(new CustomEvent(t, { detail: o }));
+  emit(t, e) {
+    return this.dispatchEvent(new CustomEvent(t, { detail: e }));
   }
   removeAllListeners() {
     this.controller.abort(), this.controller = new AbortController();
   }
 }
-const u = new M(), v = R()((n, t) => ({
+const u = new R(), w = N()((n, t) => ({
   loadingCount: 0,
   overrideState: null,
   localCounters: {},
@@ -65,86 +64,60 @@ const u = new M(), v = R()((n, t) => ({
     isGlobalLoading() {
       return t().isLoading();
     },
-    startLoading: (o) => {
-      const e = t().isLoading();
-      n((i) => ({ loadingCount: i.loadingCount + 1 })), o && n((i) => ({
+    startLoading: (e) => {
+      const o = t().isLoading();
+      n((r) => ({ loadingCount: r.loadingCount + 1 })), e && n((r) => ({
         localCounters: {
-          ...i.localCounters,
-          [o]: (i.localCounters[o] ?? 0) + 1
+          ...r.localCounters,
+          [e]: (r.localCounters[e] ?? 0) + 1
         }
       }));
-      const r = t().isLoading();
-      r && !e && u.emit("start", null), u.emit("change", { isLoading: r, isOverrideState: t().overrideState !== null });
+      const i = t().isLoading();
+      i && !o && u.emit("start", null), u.emit("change", { isLoading: i, isOverrideState: t().overrideState !== null });
     },
-    stopLoading: (o) => {
-      const e = t().isLoading(), r = o ? t().localCounters[o] ?? 0 : 0;
-      o && r > 0 && n((d) => ({
+    stopLoading: (e) => {
+      const o = t().isLoading(), i = e ? t().localCounters[e] ?? 0 : 0;
+      e && i > 0 && n((d) => ({
         loadingCount: Math.max(0, d.loadingCount - 1),
         localCounters: {
           ...d.localCounters,
-          [o]: Math.max(0, d.localCounters[o] - 1)
+          [e]: Math.max(0, d.localCounters[e] - 1)
         }
       }));
-      const i = t().isLoading();
-      !i && e && u.emit("stop", null), u.emit("change", { isLoading: i, isOverrideState: t().overrideState !== null });
-    },
-    overrideLoading: (o) => {
-      const e = t().isLoading();
-      n({ overrideState: o });
       const r = t().isLoading();
-      r && !e ? u.emit("start", null) : !r && e && u.emit("stop", null), u.emit("change", { isLoading: r, isOverrideState: o !== null });
+      !r && o && u.emit("stop", null), u.emit("change", { isLoading: r, isOverrideState: t().overrideState !== null });
     },
-    getLocalCounter: (o) => t().localCounters[o] ?? 0,
-    isLocalLoading: (o) => (t().localCounters[o] ?? 0) > 0
+    overrideLoading: (e) => {
+      const o = t().isLoading();
+      n({ overrideState: e });
+      const i = t().isLoading();
+      i && !o ? u.emit("start", null) : !i && o && u.emit("stop", null), u.emit("change", { isLoading: i, isOverrideState: e !== null });
+    },
+    getLocalCounter: (e) => t().localCounters[e] ?? 0,
+    isLocalLoading: (e) => (t().localCounters[e] ?? 0) > 0
   }
 }));
-function U() {
-  const n = E(), { actions: t } = v((i) => i), o = () => {
-    t.startLoading(n);
-  }, e = () => {
-    t.isLocalLoading(n) && t.stopLoading(n);
-  }, r = async (i) => {
-    o();
-    try {
-      return await i;
-    } finally {
-      e();
-    }
-  };
-  return {
-    overrideLoading: t.overrideLoading,
-    startLoading: o,
-    stopLoading: e,
-    get isLocalLoading() {
-      return t.isLocalLoading(n);
-    },
-    asyncUseLoading: r,
-    get isLoading() {
-      return t.isGlobalLoading();
-    }
-  };
-}
-function q() {
-  const n = O(), { actions: t } = v((i) => i), o = () => {
+function M() {
+  const n = E(), { actions: t } = w((r) => r), e = () => {
     t.startLoading(n);
-  }, e = () => {
+  }, o = () => {
     t.isLocalLoading(n) && t.stopLoading(n);
-  }, r = async (i) => {
-    o();
+  }, i = async (r) => {
+    e();
     try {
-      return await i;
+      return await r;
     } finally {
-      e();
+      o();
     }
   };
   return {
     overrideLoading: t.overrideLoading,
-    startLoading: o,
-    stopLoading: e,
+    startLoading: e,
+    stopLoading: o,
     get isLocalLoading() {
       return t.isLocalLoading(n);
     },
-    asyncUseLoading: r,
+    asyncUseLoading: i,
     get isLoading() {
       return t.isGlobalLoading();
     }
@@ -154,32 +127,32 @@ const c = {
   Spin: "spin",
   FadeInOut: "fadeInOut",
   None: "none"
-}, z = ({ scale: n = 1, animationType: t = c.Spin, animationDuration: o, children: e, style: r, className: i, id: d, prefix: g }) => {
-  const m = t, a = t === c.Spin ? 1 : t === c.FadeInOut ? 2 : 0, s = o || a, l = t === c.Spin ? "linear" : t === c.FadeInOut ? "ease-in-out" : "linear", p = t === c.None ? "none" : `${g}-${m} ${s}s ${l} infinite`;
-  return /* @__PURE__ */ f("div", { style: { animation: p, ...n !== 1 ? { zoom: n } : {}, ...r }, className: i, id: d, children: e });
-}, D = (n) => /* @__PURE__ */ f("div", { id: "loading-circle", style: { width: "90px", height: "90px", border: "15px solid #f3f3f3", borderTop: "15px solid #009b4bff", borderRadius: "50%", boxSizing: "border-box" }, ...n }), G = (n) => /* @__PURE__ */ f("div", { style: { padding: "20px", fontSize: "25px", color: "#333", fontFamily: "system-ui, sans-serif" }, ...n, children: "Please wait..." });
-function H({
+}, z = ({ scale: n = 1, animationType: t = c.Spin, animationDuration: e, children: o, style: i, className: r, id: d, prefix: g }) => {
+  const b = t, s = t === c.Spin ? 1 : t === c.FadeInOut ? 2 : 0, a = e || s, l = t === c.Spin ? "linear" : t === c.FadeInOut ? "ease-in-out" : "linear", m = t === c.None ? "none" : `${g}-${b} ${a}s ${l} infinite`;
+  return /* @__PURE__ */ f("div", { style: { animation: m, ...n !== 1 ? { zoom: n } : {}, ...i }, className: r, id: d, children: o });
+}, P = (n) => /* @__PURE__ */ f("div", { id: "loading-circle", style: { width: "90px", height: "90px", border: "15px solid #f3f3f3", borderTop: "15px solid #009b4bff", borderRadius: "50%", boxSizing: "border-box" }, ...n }), D = (n) => /* @__PURE__ */ f("div", { style: { padding: "20px", fontSize: "25px", color: "#333", fontFamily: "system-ui, sans-serif" }, ...n, children: "Please wait..." });
+function B({
   loadingComponent: n,
   loadingComponentScale: t = 1,
-  animationType: o = c.Spin,
-  animationDuration: e,
-  wrapperStyle: r,
-  wrapperClassName: i,
+  animationType: e = c.Spin,
+  animationDuration: o,
+  wrapperStyle: i,
+  wrapperClassName: r,
   wrapperId: d,
   animationWrapperStyle: g,
-  animationWrapperClassName: m,
-  animationWrapperId: a
+  animationWrapperClassName: b,
+  animationWrapperId: s
 }) {
-  n = n || (o === c.Spin ? D : G);
-  const s = y(Math.random().toString(36).substring(2, 6).replace(/[0-9]/g, "")), { loadingCount: l, overrideState: p } = v((I) => I), b = p ?? l > 0, S = y(null);
-  w(() => {
-    b ? (S.current?.showModal(), document.body.setAttribute("inert", "")) : (S.current?.close(), document.body.removeAttribute("inert"));
-  }, [b]);
-  const h = d || "loading-wrapper-" + s.current;
-  return b ? A(
-    /* @__PURE__ */ $(j, { children: [
+  n = n || (e === c.Spin ? P : D);
+  const a = v(Math.random().toString(36).substring(2, 6).replace(/[0-9]/g, "")), { loadingCount: l, overrideState: m } = w((I) => I), p = m ?? l > 0, h = v(null);
+  C(() => {
+    p ? (h.current?.showModal(), document.body.setAttribute("inert", "")) : (h.current?.close(), document.body.removeAttribute("inert"));
+  }, [p]);
+  const S = d || "loading-wrapper-" + a.current;
+  return p ? j(
+    /* @__PURE__ */ O($, { children: [
       /* @__PURE__ */ f("style", { children: `
-                        dialog#${h}[open] {
+                        dialog#${S}[open] {
                             display: flex !important;
                             justify-content: center;
                             align-items: center;
@@ -188,15 +161,15 @@ function H({
                             max-width: 100%;
                             max-height: 100%;
                         }
-                        @keyframes ${s.current}-spin {
+                        @keyframes ${a.current}-spin {
                             0% { transform: rotate(0deg); }
                             100% { transform: rotate(360deg); }
                         }
-                        @keyframes ${s.current}-fadeInOut {
+                        @keyframes ${a.current}-fadeInOut {
                             0%, 100% { opacity: 0.2; }
                             50% { opacity: 1; }
                         }
-                        body:has(dialog#${h}[open]) {
+                        body:has(dialog#${S}[open]) {
                             overflow: hidden;
                         }
                         body {
@@ -206,37 +179,36 @@ function H({
       /* @__PURE__ */ f(
         "dialog",
         {
-          ref: S,
+          ref: h,
           style: {
             border: "none",
             padding: 0,
             backgroundColor: "rgba(0, 0, 0, 0.5)",
             backdropFilter: "blur(2px)",
-            ...r
+            ...i
           },
-          className: i,
-          id: h,
-          children: /* @__PURE__ */ f(z, { scale: t, animationType: o, animationDuration: e, style: g, className: m, id: a, prefix: s.current, children: L.isValidElement(n) ? n : L.createElement(n) })
+          className: r,
+          id: S,
+          children: /* @__PURE__ */ f(z, { scale: t, animationType: e, animationDuration: o, style: g, className: b, id: s, prefix: a.current, children: L.isValidElement(n) ? n : L.createElement(n) })
         }
       )
     ] }),
     document.body
   ) : null;
 }
-function J({ isLoading: n = !1 }) {
-  const { startLoading: t, stopLoading: o } = U();
-  return w(() => (n ? t() : o(), () => {
-    n && o();
+function U({ isLoading: n = !1 }) {
+  const { startLoading: t, stopLoading: e } = M();
+  return C(() => (n ? t() : e(), () => {
+    n && e();
   }), [n]), null;
 }
 export {
   c as AnimationType,
-  M as EventEmitter,
-  J as Loading,
-  D as LoadingCircle,
-  G as LoadingPleaseWait,
-  H as LoadingRenderer,
+  R as EventEmitter,
+  U as Loading,
+  P as LoadingCircle,
+  D as LoadingPleaseWait,
+  B as LoadingRenderer,
   u as loadingEventTarget,
-  q as ssrLoading,
-  U as useLoading
+  M as useLoading
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokku-x/react-hook-loading-spinner",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "description": "A lightweight and flexible React loading state hook library with built-in spinner components, global state management, and zero dependencies (except React and Zustand).",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/dist/hooks/ssrLoading.d.ts

@@ -1,9 +0,0 @@
-export default function ssrLoading(): {
-    overrideLoading: (state: boolean | null) => void;
-    startLoading: () => void;
-    stopLoading: () => void;
-    readonly isLocalLoading: boolean;
-    asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
-    readonly isLoading: boolean;
-};
-export * from '../store/loadingStore';