{"id":22135567,"url":"https://github.com/edingroot/use-loading-steps","last_synced_at":"2025-10-29T22:20:10.105Z","repository":{"id":42659621,"uuid":"475479597","full_name":"edingroot/use-loading-steps","owner":"edingroot","description":"A simple state management library for anti-flickering smooth react page loading experience.","archived":false,"fork":false,"pushed_at":"2022-12-24T21:50:18.000Z","size":316,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-12-26T20:01:41.054Z","etag":null,"topics":["flickering","loading","react","state-machine","state-management"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-loading-steps","language":"TypeScript","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/edingroot.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-29T14:26:39.000Z","updated_at":"2022-05-12T10:29:44.000Z","dependencies_parsed_at":"2023-01-30T21:30:44.332Z","dependency_job_id":null,"html_url":"https://github.com/edingroot/use-loading-steps","commit_stats":null,"previous_names":[],"tags_count":3,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edingroot%2Fuse-loading-steps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edingroot%2Fuse-loading-steps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edingroot%2Fuse-loading-steps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edingroot%2Fuse-loading-steps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edingroot","download_url":"https://codeload.github.com/edingroot/use-loading-steps/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227614637,"owners_count":17793949,"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":["flickering","loading","react","state-machine","state-management"],"created_at":"2024-12-01T19:15:14.742Z","updated_at":"2025-10-29T22:20:10.027Z","avatar_url":"https://github.com/edingroot.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-loading-steps\n[![npm version](https://badge.fury.io/js/use-loading-steps.svg)](https://www.npmjs.com/package/use-loading-steps)\n\nA simple state management library for smooth react page loading experience.\n\n\n## Install\n```bash\nyarn add use-loading-steps\n# or\nnpm install --save use-loading-steps\n```\n\n\n## Usage\n```javascript\nconst [loadingState, setStepDone, resetLoading, skipStep] = useLoadingSteps(taskCount, initLoaded, options);\n```\n*useLoadingSteps* hook params\n- `taskCount`: the number of steps should be done before the page is loaded.\n- `initLoaded`: set to true to skip all state transitions, loadingState = `DONE`.\n- `options`: see below.\n\nHook returns\n- `loadingState`: the state, type: `LState` enum (string).\n- `setStepDone('step_name')`: to be called when a step is finished, step_name should be a unique string.\n- `resetLoading()`: to be called when reloading resources.\n- `skipStep('step_name)`: same effect as setStepDone, but prints different debug log.\n\nOptions\n```typescript\ninterface Options {\n    renderDelay?: number; // timeout of SILENT_LOADING state after started\n    resetDelay?: number;  // timeout of SILENT_LOADING state after reset\n    doneDelay?: number;   // timeout of DELAY_DONE state\n    name?: string;        // for debug log (useful if there are multiple pages / components use this hook)\n}\n```\nThe debug log is printed by `console.debug`, and is skipped in production build. \n\n\n## Loading States\n```typescript\nexport enum LState {\n    SILENT_LOADING = 'SILENT_LOADING',  // for: do loading but not to show loading animation\n    LOADING = 'LOADING',                // for: show loading animation\n    DELAY_DONE = 'DELAY_DONE',          // for: loading finished but keep showing loading animation\n    DONE = 'DONE',                      // for: all ready\n}\n```\n\nUtility functions\n```typescript\nexport const isLoading = (state: LState) =\u003e LState.LOADING === state;\nexport const isReloading = (state: LState) =\u003e [LState.SILENT_LOADING, LState.LOADING].includes(state);\nexport const isDone = (state: LState) =\u003e LState.DONE === state;\n```\n\n\n## Example\n\n```javascript\n// Number of steps: 2, loaded: false, renderDelay: 100ms\nconst [loadingState, setStepDone] = useLoadingSteps(2, false, {renderDelay: 100});\nconst [rows, setRows] = useState([]);\n\nuseEffect(async () =\u003e {\n  const data = await fetchData();\n  setStepDone('fetch');\n  \n  const rows = await transformData(data);\n  setStepDone('transform');\n}, []);\n\nif (isLoading(loadingState)) {\n  return \u003cdiv\u003e(Loading animation)\u003c/div\u003e; \n}\nreturn (\n  \u003cdiv\u003e\n    {data.map((item) =\u003e \u003cdiv\u003erow: {item}\u003c/div\u003e)}\n  \u003c/div\u003e\n);\n```\nExplanation \n- Initialize, if loaded = false, state =\u003e `SILENT_LOADING`, isLoading(loadingState) = false\n- After 100ms, if not finished, state =\u003e `LOADING`, isLoading(loadingState) = true\n- After the two `setStepDone('step name')` are called, state =\u003e `DONE`, isLoading(loadingState) = false\n\nMore examples\n- Please refer to unit tests in `lib/__test__`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedingroot%2Fuse-loading-steps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedingroot%2Fuse-loading-steps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedingroot%2Fuse-loading-steps/lists"}