spin-delay - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/index.js

@@ -22,4 +22,4 @@ (function (global, factory) {
     options = Object.assign({}, defaultOptions, options);
-    const isSSR = useIsSSR();
-    const initialState = options.ssr && isSSR && loading ? 'DISPLAY' : 'IDLE';
+    const isSSR = useIsSSR() && options.ssr;
+    const initialState = isSSR && loading ? 'DISPLAY' : 'IDLE';
     const [state, setState] = react.useState(initialState);
@@ -51,3 +51,3 @@ const timeout = react.useRef(null);
       }
-    }, [loading, state, options.delay, options.minDuration]);
+    }, [loading, state, options.delay, options.minDuration, isSSR]);
     react.useEffect(() => {
@@ -54,0 +54,0 @@ return () => clearTimeout(timeout.current);

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\ninterface SpinDelayOptions {\n  /**\n   * The delay in milliseconds before the spinner is displayed.\n   * @default 500\n   */\n  delay?: number;\n  /**\n   * The minimum duration in milliseconds the spinner is displayed.\n   * @default 200\n   */\n  minDuration?: number;\n  /**\n   * Whether to enable the spinner on the server side. If true, `delay` will be\n   * ignored, and the spinner will be shown immediately if `loading` is true.\n   * @default true\n   */\n  ssr?: boolean;\n}\n\ntype State = 'IDLE' | 'DELAY' | 'DISPLAY' | 'EXPIRE';\n\nexport const defaultOptions = {\n  delay: 500,\n  minDuration: 200,\n  ssr: true,\n};\n\nfunction useIsSSR() {\n  const [isSSR, setIsSSR] = useState(true);\n\n  useEffect(() => {\n    setIsSSR(false);\n  }, []);\n\n  return isSSR;\n}\n\nexport function useSpinDelay(\n  loading: boolean,\n  options?: SpinDelayOptions,\n): boolean {\n  options = Object.assign({}, defaultOptions, options);\n\n  const isSSR = useIsSSR();\n  const initialState = options.ssr && isSSR && loading ? 'DISPLAY' : 'IDLE';\n  const [state, setState] = useState<State>(initialState);\n  const timeout = useRef(null);\n\n  useEffect(() => {\n    if (loading && (state === 'IDLE' || isSSR)) {\n      clearTimeout(timeout.current);\n\n      const delay = isSSR ? 0 : options.delay;\n      timeout.current = setTimeout(() => {\n        if (!loading) {\n          return setState('IDLE');\n        }\n\n        timeout.current = setTimeout(() => {\n          setState('EXPIRE');\n        }, options.minDuration);\n\n        setState('DISPLAY');\n      }, delay);\n\n      if (!isSSR) {\n        setState('DELAY');\n      }\n    }\n\n    if (!loading && state !== 'DISPLAY') {\n      clearTimeout(timeout.current);\n      setState('IDLE');\n    }\n  }, [loading, state, options.delay, options.minDuration]);\n\n  useEffect(() => {\n    return () => clearTimeout(timeout.current);\n  }, []);\n\n  return state === 'DISPLAY' || state === 'EXPIRE';\n}\n"],"names":["defaultOptions","delay","minDuration","ssr","useIsSSR","isSSR","setIsSSR","useState","useEffect","useSpinDelay","loading","options","Object","assign","initialState","state","setState","timeout","useRef","clearTimeout","current","setTimeout"],"mappings":";;;;;QAuBaA,cAAc,GAAG;EAC5BC,EAAAA,KAAK,EAAE,GADqB;EAE5BC,EAAAA,WAAW,EAAE,GAFe;EAG5BC,EAAAA,GAAG,EAAE;EAHuB;;EAM9B,SAASC,QAAT;EACE,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,IAAD,CAAlC;EAEAC,EAAAA,eAAS,CAAC;EACRF,IAAAA,QAAQ,CAAC,KAAD,CAAR;EACD,GAFQ,EAEN,EAFM,CAAT;EAIA,SAAOD,KAAP;EACD;;WAEeI,aACdC,SACAC;EAEAA,EAAAA,OAAO,GAAGC,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBb,cAAlB,EAAkCW,OAAlC,CAAV;EAEA,QAAMN,KAAK,GAAGD,QAAQ,EAAtB;EACA,QAAMU,YAAY,GAAGH,OAAO,CAACR,GAAR,IAAeE,KAAf,IAAwBK,OAAxB,GAAkC,SAAlC,GAA8C,MAAnE;EACA,QAAM,CAACK,KAAD,EAAQC,QAAR,IAAoBT,cAAQ,CAAQO,YAAR,CAAlC;EACA,QAAMG,OAAO,GAAGC,YAAM,CAAC,IAAD,CAAtB;EAEAV,EAAAA,eAAS,CAAC;EACR,QAAIE,OAAO,KAAKK,KAAK,KAAK,MAAV,IAAoBV,KAAzB,CAAX,EAA4C;EAC1Cc,MAAAA,YAAY,CAACF,OAAO,CAACG,OAAT,CAAZ;EAEA,YAAMnB,KAAK,GAAGI,KAAK,GAAG,CAAH,GAAOM,OAAO,CAACV,KAAlC;EACAgB,MAAAA,OAAO,CAACG,OAAR,GAAkBC,UAAU,CAAC;EAC3B,YAAI,CAACX,OAAL,EAAc;EACZ,iBAAOM,QAAQ,CAAC,MAAD,CAAf;EACD;;EAEDC,QAAAA,OAAO,CAACG,OAAR,GAAkBC,UAAU,CAAC;EAC3BL,UAAAA,QAAQ,CAAC,QAAD,CAAR;EACD,SAF2B,EAEzBL,OAAO,CAACT,WAFiB,CAA5B;EAIAc,QAAAA,QAAQ,CAAC,SAAD,CAAR;EACD,OAV2B,EAUzBf,KAVyB,CAA5B;;EAYA,UAAI,CAACI,KAAL,EAAY;EACVW,QAAAA,QAAQ,CAAC,OAAD,CAAR;EACD;EACF;;EAED,QAAI,CAACN,OAAD,IAAYK,KAAK,KAAK,SAA1B,EAAqC;EACnCI,MAAAA,YAAY,CAACF,OAAO,CAACG,OAAT,CAAZ;EACAJ,MAAAA,QAAQ,CAAC,MAAD,CAAR;EACD;EACF,GA1BQ,EA0BN,CAACN,OAAD,EAAUK,KAAV,EAAiBJ,OAAO,CAACV,KAAzB,EAAgCU,OAAO,CAACT,WAAxC,CA1BM,CAAT;EA4BAM,EAAAA,eAAS,CAAC;EACR,WAAO,MAAMW,YAAY,CAACF,OAAO,CAACG,OAAT,CAAzB;EACD,GAFQ,EAEN,EAFM,CAAT;EAIA,SAAOL,KAAK,KAAK,SAAV,IAAuBA,KAAK,KAAK,QAAxC;EACD;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\ninterface SpinDelayOptions {\n  /**\n   * The delay in milliseconds before the spinner is displayed.\n   * @default 500\n   */\n  delay?: number;\n  /**\n   * The minimum duration in milliseconds the spinner is displayed.\n   * @default 200\n   */\n  minDuration?: number;\n  /**\n   * Whether to enable the spinner on the server side. If true, `delay` will be\n   * ignored, and the spinner will be shown immediately if `loading` is true.\n   * @default true\n   */\n  ssr?: boolean;\n}\n\ntype State = 'IDLE' | 'DELAY' | 'DISPLAY' | 'EXPIRE';\n\nexport const defaultOptions = {\n  delay: 500,\n  minDuration: 200,\n  ssr: true,\n};\n\nfunction useIsSSR() {\n  const [isSSR, setIsSSR] = useState(true);\n\n  useEffect(() => {\n    setIsSSR(false);\n  }, []);\n\n  return isSSR;\n}\n\nexport function useSpinDelay(\n  loading: boolean,\n  options?: SpinDelayOptions,\n): boolean {\n  options = Object.assign({}, defaultOptions, options);\n\n  const isSSR = useIsSSR() && options.ssr;\n  const initialState = isSSR && loading ? 'DISPLAY' : 'IDLE';\n  const [state, setState] = useState<State>(initialState);\n  const timeout = useRef(null);\n\n  useEffect(() => {\n    if (loading && (state === 'IDLE' || isSSR)) {\n      clearTimeout(timeout.current);\n\n      const delay = isSSR ? 0 : options.delay;\n      timeout.current = setTimeout(() => {\n        if (!loading) {\n          return setState('IDLE');\n        }\n\n        timeout.current = setTimeout(() => {\n          setState('EXPIRE');\n        }, options.minDuration);\n\n        setState('DISPLAY');\n      }, delay);\n\n      if (!isSSR) {\n        setState('DELAY');\n      }\n    }\n\n    if (!loading && state !== 'DISPLAY') {\n      clearTimeout(timeout.current);\n      setState('IDLE');\n    }\n  }, [loading, state, options.delay, options.minDuration, isSSR]);\n\n  useEffect(() => {\n    return () => clearTimeout(timeout.current);\n  }, []);\n\n  return state === 'DISPLAY' || state === 'EXPIRE';\n}\n"],"names":["defaultOptions","delay","minDuration","ssr","useIsSSR","isSSR","setIsSSR","useState","useEffect","useSpinDelay","loading","options","Object","assign","initialState","state","setState","timeout","useRef","clearTimeout","current","setTimeout"],"mappings":";;;;;QAuBaA,cAAc,GAAG;EAC5BC,EAAAA,KAAK,EAAE,GADqB;EAE5BC,EAAAA,WAAW,EAAE,GAFe;EAG5BC,EAAAA,GAAG,EAAE;EAHuB;;EAM9B,SAASC,QAAT;EACE,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,IAAD,CAAlC;EAEAC,EAAAA,eAAS,CAAC;EACRF,IAAAA,QAAQ,CAAC,KAAD,CAAR;EACD,GAFQ,EAEN,EAFM,CAAT;EAIA,SAAOD,KAAP;EACD;;WAEeI,aACdC,SACAC;EAEAA,EAAAA,OAAO,GAAGC,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBb,cAAlB,EAAkCW,OAAlC,CAAV;EAEA,QAAMN,KAAK,GAAGD,QAAQ,MAAMO,OAAO,CAACR,GAApC;EACA,QAAMW,YAAY,GAAGT,KAAK,IAAIK,OAAT,GAAmB,SAAnB,GAA+B,MAApD;EACA,QAAM,CAACK,KAAD,EAAQC,QAAR,IAAoBT,cAAQ,CAAQO,YAAR,CAAlC;EACA,QAAMG,OAAO,GAAGC,YAAM,CAAC,IAAD,CAAtB;EAEAV,EAAAA,eAAS,CAAC;EACR,QAAIE,OAAO,KAAKK,KAAK,KAAK,MAAV,IAAoBV,KAAzB,CAAX,EAA4C;EAC1Cc,MAAAA,YAAY,CAACF,OAAO,CAACG,OAAT,CAAZ;EAEA,YAAMnB,KAAK,GAAGI,KAAK,GAAG,CAAH,GAAOM,OAAO,CAACV,KAAlC;EACAgB,MAAAA,OAAO,CAACG,OAAR,GAAkBC,UAAU,CAAC;EAC3B,YAAI,CAACX,OAAL,EAAc;EACZ,iBAAOM,QAAQ,CAAC,MAAD,CAAf;EACD;;EAEDC,QAAAA,OAAO,CAACG,OAAR,GAAkBC,UAAU,CAAC;EAC3BL,UAAAA,QAAQ,CAAC,QAAD,CAAR;EACD,SAF2B,EAEzBL,OAAO,CAACT,WAFiB,CAA5B;EAIAc,QAAAA,QAAQ,CAAC,SAAD,CAAR;EACD,OAV2B,EAUzBf,KAVyB,CAA5B;;EAYA,UAAI,CAACI,KAAL,EAAY;EACVW,QAAAA,QAAQ,CAAC,OAAD,CAAR;EACD;EACF;;EAED,QAAI,CAACN,OAAD,IAAYK,KAAK,KAAK,SAA1B,EAAqC;EACnCI,MAAAA,YAAY,CAACF,OAAO,CAACG,OAAT,CAAZ;EACAJ,MAAAA,QAAQ,CAAC,MAAD,CAAR;EACD;EACF,GA1BQ,EA0BN,CAACN,OAAD,EAAUK,KAAV,EAAiBJ,OAAO,CAACV,KAAzB,EAAgCU,OAAO,CAACT,WAAxC,EAAqDG,KAArD,CA1BM,CAAT;EA4BAG,EAAAA,eAAS,CAAC;EACR,WAAO,MAAMW,YAAY,CAACF,OAAO,CAACG,OAAT,CAAzB;EACD,GAFQ,EAEN,EAFM,CAAT;EAIA,SAAOL,KAAK,KAAK,SAAV,IAAuBA,KAAK,KAAK,QAAxC;EACD;;;;;;;;;"}

package.json

 {
   "name": "spin-delay",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Smart spinner helper for React, to manage the duration of loading states.",
@@ -5,0 +5,0 @@ "source": "src/index.ts",

README.md

 # spin-delay
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-
-[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)
-
+[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
@@ -18,3 +16,3 @@
 This can be fixed by adding a delay. Only show the spinner when the request takes
-longer than 200ms for example. And what happens when te request takes 210ms? Right,
+longer than 200ms for example. And what happens when the request takes 210ms? Right,
 we see a spinner for 10ms. This flicker can be annoying.
@@ -81,2 +79,3 @@
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/chucamphong"><img src="https://avatars.githubusercontent.com/u/58473133?v=4?s=100" width="100px;" alt="Phong Chu"/><br /><sub><b>Phong Chu</b></sub></a><br /><a href="https://github.com/smeijer/spin-delay/commits?author=chucamphong" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/joeporpeglia"><img src="https://avatars.githubusercontent.com/u/1399969?v=4?s=100" width="100px;" alt="Joe Porpeglia"/><br /><sub><b>Joe Porpeglia</b></sub></a><br /><a href="https://github.com/smeijer/spin-delay/commits?author=joeporpeglia" title="Code">💻</a></td>
     </tr>
@@ -83,0 +82,0 @@ </tbody>

No alert changes

Improved metrics

Total package byte prevSize

288367

0.13%

Worsened metrics

Number of lines in readme file

89

-1.11%

No dependency changes