chore: refactor loading dot

mdvanes · Apr 15, 2024 · 8a26985 · 8a26985
1 parent ded8cb0
commit 8a26985
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/apps/client/src/Components/Molecules/HomeSec/HomeSec.tsx b/apps/client/src/Components/Molecules/HomeSec/HomeSec.tsx
@@ -9,10 +9,13 @@ import {
     Paper,
     Tooltip,
 } from "@mui/material";
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 import { useGetHomesecStatusQuery } from "../../../Services/homesecApi";
+import { getErrorMessage } from "../../../Utils/getErrorMessage";
+import { useAppDispatch } from "../../../store";
 import ErrorRetry from "../ErrorRetry/ErrorRetry";
 import LoadingDot from "../LoadingDot/LoadingDot";
+import { logError } from "../LogCard/logSlice";
 import SimpleHomeSecListItem from "./SimpleHomeSecListItem";
 
 const statusClass: Record<HomesecStatusResponse["status"] | "Error", string> = {
@@ -29,9 +32,24 @@ const typeIcon: Record<TypeF, string> = {
     "Remote Controller": "settings_remote",
 };
 
+const UPDATE_INTERVAL_MS = 120000;
+
 export const HomeSec: FC = () => {
-    const { data, isLoading, isFetching, isError, refetch } =
-        useGetHomesecStatusQuery(undefined);
+    const [isSkippingBecauseError, setIsSkippingBecauseError] = useState(false);
+    const dispatch = useAppDispatch();
+    const { data, isLoading, isFetching, isError, error, refetch } =
+        useGetHomesecStatusQuery(undefined, {
+            pollingInterval: isSkippingBecauseError
+                ? undefined
+                : UPDATE_INTERVAL_MS,
+        });
+
+    useEffect(() => {
+        if (error) {
+            setIsSkippingBecauseError(true);
+            dispatch(logError(`HomeSec failed: ${getErrorMessage(error)}`));
+        }
+    }, [dispatch, error]);
 
     const hasNoDevices =
         !isError &&
@@ -49,7 +67,10 @@ export const HomeSec: FC = () => {
                     borderColor: statusClass[data?.status ?? "Error"],
                 }}
             >
-                <LoadingDot isLoading={isLoading || isFetching} />
+                <LoadingDot
+                    isLoading={isLoading || isFetching}
+                    slowUpdateMs={6000}
+                />
                 {isError && (
                     <ErrorRetry marginate retry={() => refetch()}>
                         HomeSec could not load

diff --git a/apps/client/src/Components/Molecules/LoadingDot/LoadingDot.tsx b/apps/client/src/Components/Molecules/LoadingDot/LoadingDot.tsx
@@ -3,10 +3,11 @@ import { FC, useEffect, useState } from "react";
 
 const SLOW_UPDATE_MS = 1000; // if the response takes longer than 1000ms, it is considered slow and the full progress bar is shown
 
-const LoadingDot: FC<{ isLoading: boolean; noMargin?: boolean }> = ({
-    isLoading,
-    noMargin = false,
-}) => {
+const LoadingDot: FC<{
+    isLoading: boolean;
+    noMargin?: boolean;
+    slowUpdateMs?: number;
+}> = ({ isLoading, noMargin = false, slowUpdateMs = SLOW_UPDATE_MS }) => {
     const [isSlow, setIsSlow] = useState(false);
 
     useEffect(() => {
@@ -16,14 +17,14 @@ const LoadingDot: FC<{ isLoading: boolean; noMargin?: boolean }> = ({
             setIsSlow(false);
             timer = setTimeout(() => {
                 setIsSlow(true);
-            }, SLOW_UPDATE_MS);
+            }, slowUpdateMs);
         }
         return () => {
             if (timer) {
                 clearTimeout(timer);
             }
         };
-    }, [isLoading]);
+    }, [isLoading, slowUpdateMs]);
 
     return (
         <Box