add loader

kenshanta · Jun 17, 2024 · 08137ed · 08137ed
1 parent af3769f
commit 08137ed
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 7 deletions.
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -1,8 +1,10 @@
 $padding: 3rem;
 $maxHeight: 73vh;
+$universalFont: "Protest";
 
 .main {
   padding: $padding;
+  font-family: $universalFont;
 }
 
 .graph {
@@ -25,3 +27,49 @@ $maxHeight: 73vh;
   font-size: larger;
   padding: 19px;
 }
+
+.loader {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: $maxHeight;
+
+  svg text {
+    font-family: "Protest";
+    text-transform: uppercase;
+    animation: stroke 2s forwards alternate;
+    stroke-width: 90px;
+    stroke: green;
+    font-size: 3.5rem;
+  }
+
+  @keyframes stroke {
+    0% {
+      fill: rgba(72, 138, 20, 0);
+      stroke: green;
+      stroke-dashoffset: 55%;
+      stroke-dasharray: 5% 35%;
+      stroke-width: 2;
+    }
+
+    90% {
+      fill: rgba(72, 138, 20, 0);
+      stroke: rgb(84, 84, 84);
+    }
+
+    95% {
+      fill: rgba(72, 138, 20, 0);
+      stroke: rgb(41, 41, 41);
+      stroke-width: 3;
+    }
+
+    100% {
+      fill: rgb(46, 46, 46);
+      stroke: rgba(54, 95, 160, 0);
+      stroke-dashoffset: -5%;
+      stroke-dasharray: 50% 0;
+      stroke-width: 2;
+    }
+  }
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,8 @@
 "use client";
+import Image from "next/image";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import styles from "./page.module.scss";
+import loadingSvg from "../../public/loading.svg";
 import { Bar } from "react-chartjs-2";
 import {
   CategoryScale,
@@ -27,7 +29,6 @@ export default function Home() {
     labels: ["shop_click", "interaction", "start"],
     datasets: [{ label: "initialLabel", data: new Array(0) }],
   });
-
   const filterOptions: FilterOption[] = useMemo(
     () => [
       { label: "All", value: "" },
@@ -36,9 +37,8 @@ export default function Home() {
     ],
     []
   );
-
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [filter, setFilter] = useState<string>(filterOptions[0].value);
-
   const options = useMemo(
     () => ({
       elements: {
@@ -55,6 +55,7 @@ export default function Home() {
           text: `${filter ? filter.toUpperCase() : "All"} Graph Logs`,
           font: {
             size: 33,
+            family: "Protest",
           },
         },
       },
@@ -64,6 +65,7 @@ export default function Home() {
   );
 
   const fetchData = useCallback(async (filterValue: string = "") => {
+    setIsLoading(true);
     try {
       const res = await fetch(`api/data?filter=${filterValue}`);
       if (!res.ok) {
@@ -75,6 +77,8 @@ export default function Home() {
       setChartData(filteredData);
     } catch (error) {
       console.error("Fetch data error:", error);
+    } finally {
+      setIsLoading(false);
     }
   }, []);
 
@@ -114,12 +118,23 @@ export default function Home() {
     <main className={styles.main}>
       <div>
         <filter-option-area></filter-option-area>
-        {chartData ? (
-          <div className={styles.graph}>
-            <Bar options={options} data={chartData} />
+        {isLoading ? (
+          <div className={styles.loader}>
+            <svg height={100} viewBox="0 0 400 100">
+              <text
+                x="50%"
+                y="50%"
+                dominantBaseline="middle"
+                textAnchor="middle"
+              >
+                Loading...
+              </text>
+            </svg>
           </div>
         ) : (
-          <div className={styles.graph}>Loading...</div>
+          <div className={styles.graph}>
+            <Bar options={options} data={chartData!} />
+          </div>
         )}
         <flex-box></flex-box>
       </div>