feat: added loader to production-list view

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

@@ -3,8 +3,19 @@ import { useEffect, useState } from "react";
 import { API } from "../../api/api.ts";
 import { TProduction } from "../production-line/types.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
+import { LoaderDots } from "../loader/loader.tsx";
+
+const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  padding: 2rem 0 2rem 2rem;
+  flex-wrap: wrap;
+  flex-direction: column;
+`;
 
 const ProductionListContainer = styled.div`
+  position: absolute;
+  top: 2rem;
   display: flex;
   padding: 2rem 0 2rem 2rem;
   flex-wrap: wrap;
@@ -33,6 +44,7 @@ const ProductionId = styled.div`
 
 export const ProductionsList = () => {
   const [productions, setProductions] = useState<TProduction[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
   const [{ reloadProductionList }, dispatch] = useGlobalState();
 
   // TODO extract to separate hook file
@@ -68,6 +80,7 @@ export const ProductionsList = () => {
           dispatch({
             type: "PRODUCTION_LIST_FETCHED",
           });
+          setLoading(false);
         })
         .catch(() => {
           // TODO handle error/retry
@@ -78,15 +91,27 @@ export const ProductionsList = () => {
     };
   }, [dispatch, reloadProductionList]);
 
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      setLoading(!loading);
+    }, 5000);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [loading]);
+
   return (
-    <ProductionListContainer>
-      {/* TODO add loading indicator */}
-      {productions.map((p) => (
-        <ProductionItem key={p.id}>
-          <ProductionName>{p.name}</ProductionName>
-          <ProductionId>{p.id}</ProductionId>
-        </ProductionItem>
-      ))}
-    </ProductionListContainer>
+    <Wrapper>
+      {loading && <LoaderDots />}
+      <ProductionListContainer>
+        {productions.map((p) => (
+          <ProductionItem key={p.id}>
+            <ProductionName>{p.name}</ProductionName>
+            <ProductionId>{p.id}</ProductionId>
+          </ProductionItem>
+        ))}
+      </ProductionListContainer>
+    </Wrapper>
   );
 };

src/components/loader/loader.tsx

@@ -0,0 +1,35 @@
+import styled from "@emotion/styled";
+import { FC, useEffect, useState } from "react";
+
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+const Dots = styled.span`
+  padding-left: 2rem;
+  color: #cdcdcd;
+  font-size: xx-large;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
+export const LoaderDots: FC = () => {
+  const [dots, setDots] = useState<string>(".");
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      setDots((prevDots) => (prevDots.length > 2 ? "." : `${prevDots}.`));
+    }, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  return (
+    <Wrapper>
+      <Dots>{dots}</Dots>
+    </Wrapper>
+  );
+};