Add loading animation for charts

thearyadev · Jan 24, 2024 · 0b10f35 · 0b10f35
1 parent 37adcfb
commit 0b10f35
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 19 deletions.
diff --git a/frontend/app/components/charts/barChart.tsx b/frontend/app/components/charts/barChart.tsx
@@ -2,10 +2,11 @@
 
 import * as Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import styles from "./barChart.module.scss";
 import { HeroColors } from "@/app/components/charts/heroColors";
 import classNames from "classnames";
+import {twMerge} from "tailwind-merge"
 
 interface GraphData {
   labels: string[];
@@ -18,7 +19,6 @@ interface BarChartProps extends HighchartsReact.Props {
   maxY: number;
   className?: string | string[]
 }
-
 const BarChart = (props: BarChartProps) => {
   const { title, graph, maxY } = props;
   const options: Highcharts.Options = {
@@ -52,19 +52,35 @@ const BarChart = (props: BarChartProps) => {
         text: null,
       },
     },
+    chart: {
+      events: {
+        load: () => { setLoading(false) }
+      }
+    }
   };
+  console.log(props.graph.labels)
   const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
-  const chartContainerStyle = classNames(styles.chartContainer, props.className)
+  const chartContainerStyle = classNames(styles.chartContainer, props.className) // meow
+  const [loading, setLoading] = useState(true)
   return (
     <div className={chartContainerStyle}>
       <h5 className="text-center pb-2 capitalize">{title.toLowerCase()}</h5>
-      <HighchartsReact
-        id="gnomegnome"
-        highcharts={Highcharts}
-        options={options}
-        ref={chartComponentRef}
-        {...props}
-      />
+      <div className={loading ? "hidden" : ""}>
+        <HighchartsReact
+          id="gnomegnome"
+          highcharts={Highcharts}
+          options={options}
+          ref={chartComponentRef}
+          {...props}
+
+        />
+      </div>
+
+      <div role="status" className={`max-w flex text-center justify-center items-center h-[18rem]  animate-pulse ${loading ? '' : "hidden"}`}>
+        <p>Loading...</p>
+      </div>
+
+
     </div>
   );
 };

diff --git a/frontend/app/components/charts/lineChart.tsx b/frontend/app/components/charts/lineChart.tsx
@@ -2,7 +2,7 @@
 
 import * as Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { HeroColors } from "@/app/components/charts/heroColors";
 import type { TrendLine } from "@/app/utils/serverSideProps";
 import classNames from "classnames";
@@ -50,20 +50,31 @@ const LineChart = (props: LineChartProps) => {
     },
     chart: {
       height: "45%",
+      events:{
+        load: () => {setLoading(false)}
+      }
     },
   };
   const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
-
+  const [loading, setLoading] = useState(true)
   return (
     <div className={props.className}>
       <h5 className="text-center pb-2">{title}</h5>
-      <HighchartsReact
-        id="gnomegnome"
-        highcharts={Highcharts}
-        options={options}
-        ref={chartComponentRef}
-        {...props}
-      />
+
+      <div className={loading ? "hidden" : ""}>
+        <HighchartsReact
+          id="gnomegnome"
+          highcharts={Highcharts}
+          options={options}
+          ref={chartComponentRef}
+          {...props}
+        />
+
+      </div>
+
+      <div role="status" className={`max-w flex text-center justify-center items-center h-[60rem]  animate-pulse ${loading ? '' : "hidden"}`}>
+        <p>Loading...</p>
+      </div>
     </div>
   );
 };