Merge pull request #1009 from etalab/1007-fix-loader

fix: flickering of loading state for datasection component
annuaire-entreprises-data-gouv-fr · Apr 23, 2024 · 4613e9a · 4613e9a
2 parents b85a630 + ade164c
commit 4613e9a
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/components/section/data-section/client.tsx b/components/section/data-section/client.tsx
@@ -25,6 +25,7 @@ export function DataSectionClient<T>({
   ...props
 }: IDataSectionClientProps<T>) {
   const showLoadingState = useShowLoadingState(data);
+
   if (isAPILoading(data) && !showLoadingState) {
     return <div style={{ minHeight: '100px' }} />;
   }
@@ -49,19 +50,19 @@ export function DataSectionClient<T>({
 
 /** Contains the logic that prevents flickering of UI */
 function useShowLoadingState<T>(data: IAPILoading | T): data is IAPILoading {
-  const after100ms = useTimeout(100);
+  const before100ms = !useTimeout(100);
   const before800ms = !useTimeout(800);
   const [dataLoadedBefore100ms, setDataLoadedBefore100ms] = useState(
-    !isAPILoading(data)
+    before100ms && !isAPILoading(data)
   );
 
   useEffect(() => {
-    if (!isAPILoading(data) && !after100ms) {
+    if (!isAPILoading(data) && before100ms) {
       setDataLoadedBefore100ms(true);
     }
-  }, [data, after100ms]);
+  }, [data]);
 
-  if (dataLoadedBefore100ms) {
+  if (before100ms || dataLoadedBefore100ms) {
     return false;
   }
   if (before800ms) {