feat: add initial load logic to production list

src/components/landing-page/productions-list.tsx

@@ -37,15 +37,17 @@ export const ProductionsList = () => {
   const [productions, setProductions] = useState<TProduction[]>([]);
   const [intervalLoad, setIntervalLoad] = useState<boolean>(false);
   const [{ reloadProductionList }, dispatch] = useGlobalState();
+  const [doInitialLoad, setDoInitialLoad] = useState(true);
 
   // TODO extract to separate hook file
   useEffect(() => {
     let aborted = false;
 
-    if (reloadProductionList || intervalLoad) {
+    if (reloadProductionList || intervalLoad || doInitialLoad) {
       API.listProductions()
         .then((result) => {
           if (aborted) return;
+
           setProductions(
             result
               // pick laste 10 items
@@ -67,10 +69,14 @@ export const ProductionsList = () => {
                 };
               })
           );
+
           dispatch({
             type: "PRODUCTION_LIST_FETCHED",
           });
+
           setIntervalLoad(false);
+
+          setDoInitialLoad(false);
         })
         .catch(() => {
           // TODO handle error/retry
@@ -80,9 +86,12 @@ export const ProductionsList = () => {
     return () => {
       aborted = true;
     };
-  }, [dispatch, intervalLoad, reloadProductionList]);
+  }, [dispatch, intervalLoad, reloadProductionList, doInitialLoad]);
 
-  const showRefreshing = useRefreshAnimation({ reloadProductionList });
+  const showRefreshing = useRefreshAnimation({
+    reloadProductionList,
+    doInitialLoad,
+  });
 
   useEffect(() => {
     const interval = window.setInterval(() => {

src/components/landing-page/use-refresh-animation.ts

@@ -2,17 +2,19 @@ import { useEffect, useState } from "react";
 
 type TUseRefreshAnimationOptions = {
   reloadProductionList: boolean;
+  doInitialLoad: boolean;
 };
 
 export const useRefreshAnimation = ({
   reloadProductionList,
+  doInitialLoad,
 }: TUseRefreshAnimationOptions) => {
   const [showRefreshing, setShowRefreshing] = useState(true);
 
   useEffect(() => {
     let timeout: number | null = null;
 
-    if (showRefreshing) {
+    if (showRefreshing || doInitialLoad) {
       timeout = window.setTimeout(() => {
         setShowRefreshing(false);
       }, 1500);
@@ -23,13 +25,13 @@ export const useRefreshAnimation = ({
         window.clearTimeout(timeout);
       }
     };
-  }, [showRefreshing]);
+  }, [showRefreshing, doInitialLoad]);
 
   useEffect(() => {
     if (reloadProductionList) {
       setShowRefreshing(true);
     }
-  }, [reloadProductionList]);
+  }, [reloadProductionList, doInitialLoad]);
 
   return showRefreshing;
 };

src/global-state/global-state-reducer.ts

@@ -6,7 +6,7 @@ import { uniqBy } from "../helpers";
 const initialGlobalState: TGlobalState = {
   production: null,
   error: null,
-  reloadProductionList: true,
+  reloadProductionList: false,
   devices: null,
   joinProductionOptions: null,
 };