Files
webstudio/apps/builder/app/shared/hook-utils/use-interval.ts
Oleg Isonen d2a3015239 feat: Builder loading delight (#3526)
Closes https://github.com/webstudio-is/webstudio/issues/3520

## Description

Before: 


https://github.com/webstudio-is/webstudio/assets/52824/4ba347e6-8994-45c6-bdee-cdd0738539fa


After:



https://github.com/webstudio-is/webstudio/assets/52824/416b4614-cf8d-4b2e-bf34-439fb65d3195






## Steps for reproduction

1. reload builder with large amount of data
2. click from dashboard to a project

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2024-06-10 21:10:15 +02:00

19 lines
437 B
TypeScript

import { useEffect, useRef } from "react";
type Timeout = ReturnType<typeof setTimeout>;
export const useInterval = (callback: (id: Timeout) => void, delay: number) => {
const savedCallback = useRef(callback);
useEffect(() => {
savedCallback.current = callback;
});
useEffect(() => {
const id = setInterval(() => {
savedCallback.current(id);
}, delay);
return () => clearInterval(id);
}, [delay]);
};