feat: add support for SSR (#8)

Co-authored-by: Phong Chu <58473133+chucamphong@users.noreply.github.com>

Author: smeijer

.changeset/fresh-monkeys-yell.md

@@ -0,0 +1,13 @@
+---
+'spin-delay': major
+---
+
+We now support spinner initialization from the server (SSR). When the `loading` prop is `true` due to server-side rendering, the spinner will be shown immediately. You can opt-out of this behavior by setting the `ssr` option to `false`.
+
+```tsx
+import { useSpinDelay } from 'spin-delay';
+
+const spin = useSpinDelay(loading, {
+  ssr: false, // defaults to true
+});
+```

src/index.ts

@@ -1,30 +1,58 @@
 import { useState, useEffect, useRef } from 'react';
 
 interface SpinDelayOptions {
+  /**
+   * The delay in milliseconds before the spinner is displayed.
+   * @default 500
+   */
   delay?: number;
+  /**
+   * The minimum duration in milliseconds the spinner is displayed.
+   * @default 200
+   */
   minDuration?: number;
+  /**
+   * Whether to enable the spinner on the server side. If true, `delay` will be
+   * ignored, and the spinner will be shown immediately if `loading` is true.
+   * @default true
+   */
+  ssr?: boolean;
 }
 
 type State = 'IDLE' | 'DELAY' | 'DISPLAY' | 'EXPIRE';
 
 export const defaultOptions = {
   delay: 500,
   minDuration: 200,
+  ssr: true,
 };
 
+function useIsSSR() {
+  const [isSSR, setIsSSR] = useState(true);
+
+  useEffect(() => {
+    setIsSSR(false);
+  }, []);
+
+  return isSSR;
+}
+
 export function useSpinDelay(
   loading: boolean,
   options?: SpinDelayOptions,
 ): boolean {
   options = Object.assign({}, defaultOptions, options);
 
-  const [state, setState] = useState<State>('IDLE');
+  const isSSR = useIsSSR();
+  const initialState = options.ssr && isSSR && loading ? 'DISPLAY' : 'IDLE';
+  const [state, setState] = useState<State>(initialState);
   const timeout = useRef(null);
 
   useEffect(() => {
-    if (loading && state === 'IDLE') {
+    if (loading && (state === 'IDLE' || isSSR)) {
       clearTimeout(timeout.current);
 
+      const delay = isSSR ? 0 : options.delay;
       timeout.current = setTimeout(() => {
         if (!loading) {
           return setState('IDLE');
@@ -35,9 +63,11 @@ export function useSpinDelay(
         }, options.minDuration);
 
         setState('DISPLAY');
-      }, options.delay);
+      }, delay);
 
-      setState('DELAY');
+      if (!isSSR) {
+        setState('DELAY');
+      }
     }
 
     if (!loading && state !== 'DISPLAY') {

types/index.d.ts

@@ -1,10 +1,25 @@
 interface SpinDelayOptions {
+  /**
+   * The delay in milliseconds before the spinner is displayed.
+   * @default 500
+   */
   delay?: number;
+  /**
+   * The minimum duration in milliseconds the spinner is displayed.
+   * @default 200
+   */
   minDuration?: number;
+  /**
+   * Whether to enable the spinner on the server side. If true, `delay` will be
+   * ignored, and the spinner will be shown immediately if `loading` is true.
+   * @default true
+   */
+  ssr?: boolean;
 }
 export declare const defaultOptions: {
   delay: number;
   minDuration: number;
+  ssr: true;
 };
 export declare function useSpinDelay(
   loading: boolean,