From eaef5387f1c76d4ab5fad508ce01a26e4c97d82b Mon Sep 17 00:00:00 2001
From: Martin <901824+martinstark@users.noreply.github.com>
Date: Thu, 11 Apr 2024 11:54:29 +0200
Subject: [PATCH] feat: add initial load logic to production list

---
 src/components/landing-page/productions-list.tsx  | 15 ++++++++++++---
 .../landing-page/use-refresh-animation.ts         |  8 +++++---
 src/global-state/global-state-reducer.ts          |  2 +-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/landing-page/productions-list.tsx b/src/components/landing-page/productions-list.tsx
index 318076d4..24e704db 100644
--- a/src/components/landing-page/productions-list.tsx
+++ b/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(() => {
diff --git a/src/components/landing-page/use-refresh-animation.ts b/src/components/landing-page/use-refresh-animation.ts
index 0d61ee2c..39d297f6 100644
--- a/src/components/landing-page/use-refresh-animation.ts
+++ b/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;
 };
diff --git a/src/global-state/global-state-reducer.ts b/src/global-state/global-state-reducer.ts
index ed1a95e8..7a1e2d4c 100644
--- a/src/global-state/global-state-reducer.ts
+++ b/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,
   mediaStreamInput: null,