Merge pull request 'Adding Spinner in Dashbard.' (#496) from Kartik_Bug_V1#1543 into Issues_Oct_4W_V1

Reviewed-on: #496
Merged

src/components/Charts/HorizontalBarChart.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactApexChart from "react-apexcharts";
 import PropTypes from "prop-types";
+import { SpinnerLoader } from "../common/Loader";
 
 const HorizontalBarChart = ({
   seriesData = [],
@@ -23,7 +24,12 @@ const HorizontalBarChart = ({
   if (loading) {
     return (
       <div className="w-full h-[380px] flex items-center justify-center bg-gray-100 rounded-xl">
-        <span className="text-gray-500">Loading chart...</span>
+        <div
+          className="d-flex justify-content-center align-items-center"
+          style={{ minHeight: "50vh" }}
+        >
+          <SpinnerLoader />
+        </div>
         {/* Replace this with a skeleton or spinner if you prefer */}
       </div>
     );

src/components/Charts/LineChart.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactApexChart from "react-apexcharts";
 import PropTypes from "prop-types";
+import { SpinnerLoader } from "../common/Loader";
 
 const LineChart = ({
   seriesData = [],
@@ -18,8 +19,12 @@ const LineChart = ({
   if (loading) {
     return (
       <div className="flex justify-center items-center h-[350px] text-gray-500">
-                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mr-2" />
+        <div
-                Loading chart...
+          className="d-flex justify-content-center align-items-center"
+          style={{ minHeight: "50vh" }}
+        >
+          <SpinnerLoader />
+        </div>
       </div>
     );
   }

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -6,6 +6,7 @@ import { DateRangePicker1 } from "../common/DateRangePicker";
 import { FormProvider, useForm } from "react-hook-form";
 import { formatCurrency, localToUtc } from "../../utils/appUtils";
 import { useProjectName } from "../../hooks/useProjects";
+import { SpinnerLoader } from "../common/Loader";
 
 const ExpenseAnalysis = () => {
   const projectId = useSelectedProject();
@@ -100,14 +101,20 @@ const ExpenseAnalysis = () => {
             className="d-flex justify-content-center align-items-center"
             style={{ height: "200px" }}
           >
-              <span>Loading...</span>
+            <SpinnerLoader />
           </div>
         )}
 
         {!isLoading && report.length === 0 && (
-            <div className="text-center py-5 text-muted">No data found</div>
+          <div
+            className="d-flex justify-content-center align-items-center text-muted"
+            style={{ height: "300px" }}
+          >
+            No data found
+          </div>
         )}
 
+
         {!isLoading && report.length > 0 && (
           <>
             {isFetching && (

src/components/common/Loader.jsx

@@ -19,3 +19,13 @@ const Loader = () => {
 
 export default Loader;
 
+export const SpinnerLoader = () => {
+  return (
+    <div className="text-center">
+      <div className="spinner-border text-primary mb-3" role="status">
+        <span className="visually-hidden">Loading...</span>
+      </div>
+      <p className="text-secondary mb-0">Loading data...</p>
+    </div>
+  )
+}