mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
834ae1d8a4
This PR makes changes to how the project overview skeleton screen works. Important changes: - Add skeleton screens to missing elements, creating a more comprehensive loading screen - Split the page into different loading sections, so that we can load the table when we fetch the next page without affecting the rest of the page. https://www.loom.com/share/e5d30dc897ac488ea80cfae11ffab646 Next steps: * Hide bar if total is less than 25 * Add FE testing
25 lines
682 B
TypeScript
25 lines
682 B
TypeScript
import { createRef, useLayoutEffect } from 'react';
|
|
|
|
type refElement = HTMLDivElement;
|
|
|
|
const useLoading = (loading: boolean, selector = '[data-loading=true]') => {
|
|
const ref = createRef<refElement>();
|
|
useLayoutEffect(() => {
|
|
if (ref.current) {
|
|
const elements = ref.current.querySelectorAll(selector);
|
|
|
|
elements.forEach((element) => {
|
|
if (loading) {
|
|
element.classList.add('skeleton');
|
|
} else {
|
|
setTimeout(() => element.classList.remove('skeleton'), 10);
|
|
}
|
|
});
|
|
}
|
|
}, [loading, ref]);
|
|
|
|
return ref;
|
|
};
|
|
|
|
export default useLoading;
|