{"id":13759965,"url":"https://github.com/smeijer/spin-delay","last_synced_at":"2025-05-16T12:12:08.017Z","repository":{"id":37845847,"uuid":"315975612","full_name":"smeijer/spin-delay","owner":"smeijer","description":"Smart spinner helper for React, to manage the duration of loading states.","archived":false,"fork":false,"pushed_at":"2024-08-16T17:14:43.000Z","size":726,"stargazers_count":489,"open_issues_count":0,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-16T05:38:33.701Z","etag":null,"topics":["hacktoberfest","react","spinner"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smeijer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-25T15:12:41.000Z","updated_at":"2025-05-16T05:18:06.000Z","dependencies_parsed_at":"2024-01-20T06:05:21.619Z","dependency_job_id":"8976a54e-6b7b-4899-a4f2-c57d543c6195","html_url":"https://github.com/smeijer/spin-delay","commit_stats":{"total_commits":19,"total_committers":4,"mean_commits":4.75,"dds":0.1578947368421053,"last_synced_commit":"9fe2ab5860cc16d134bda5c6e8825698e145e7f9"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smeijer%2Fspin-delay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smeijer%2Fspin-delay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smeijer%2Fspin-delay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smeijer%2Fspin-delay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smeijer","download_url":"https://codeload.github.com/smeijer/spin-delay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254527099,"owners_count":22085919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","react","spinner"],"created_at":"2024-08-03T13:01:01.588Z","updated_at":"2025-05-16T12:12:07.993Z","avatar_url":"https://github.com/smeijer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# spin-delay\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n**Smart Spinner Helper for React**\n\n![demo animation of spin-delay](./docs/spin-delay.gif)\n\nThere are a few annoyances when working with spinners. Network request can be so\nfast that rendering a spinner does more harm than good. Why render a spinner\nwhen loading the data only takes like 50ms?\n\nThis can be fixed by adding a delay. Only show the spinner when the request takes\nlonger than 200ms for example. And what happens when the request takes 210ms? Right,\nwe see a spinner for 10ms. This flicker can be annoying.\n\n`spin-delay` solves these issues by wrapping your booleans, and only returning\ntrue after the `delay`, and for a minimum time of `minDuration`. This way\nyou're sure that you don't show unnecessary or very short living spinners.\n\n## Demo\n\nSandbox -\u003e https://codesandbox.io/s/spin-delay-jlp2c\n\n## Installation\n\nWith npm:\n\n```sh\nnpm install --save spin-delay\n```\n\nWith yarn:\n\n```sh\nyarn add spin-delay\n```\n\n## API\n\nThe examples below use the following data object:\n\n```jsx\nimport { useSpinDelay } from 'spin-delay';\n\nfunction MyComponent() {\n  const [{ loading }] = useFetch('http://example.com');\n\n  // options are optional, and default to these values\n  const showSpinner = useSpinDelay(loading, { delay: 500, minDuration: 200 });\n\n  if (showSpinner) {\n    return \u003cSpinner /\u003e;\n  }\n\n  // ...\n}\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/smeijer\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1196524?v=4?s=100\" width=\"100px;\" alt=\"Stephan Meijer\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eStephan Meijer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-smeijer\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/smeijer/spin-delay/commits?author=smeijer\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#infra-smeijer\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-smeijer\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/smeijer/spin-delay/commits?author=smeijer\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://peter.hozak.info/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/1087670?v=4?s=100\" width=\"100px;\" alt=\"Peter Hozák\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePeter Hozák\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-Aprillion\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/smeijer/spin-delay/commits?author=Aprillion\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://www.erichosick.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/295228?v=4?s=100\" width=\"100px;\" alt=\"Eric Hosick\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEric Hosick\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/smeijer/spin-delay/commits?author=erichosick\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/supachaidev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/88824768?v=4?s=100\" width=\"100px;\" alt=\"Supachai Dev\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSupachai Dev\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/smeijer/spin-delay/commits?author=supachaidev\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://kentcdodds.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1500684?v=4?s=100\" width=\"100px;\" alt=\"Kent C. Dodds\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKent C. Dodds\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/smeijer/spin-delay/commits?author=kentcdodds\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/chucamphong\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/58473133?v=4?s=100\" width=\"100px;\" alt=\"Phong Chu\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePhong Chu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/smeijer/spin-delay/commits?author=chucamphong\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/joeporpeglia\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1399969?v=4?s=100\" width=\"100px;\" alt=\"Joe Porpeglia\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJoe Porpeglia\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/smeijer/spin-delay/commits?author=joeporpeglia\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmeijer%2Fspin-delay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmeijer%2Fspin-delay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmeijer%2Fspin-delay/lists"}