From 6391fcc888f1dd754818bce22b6e24bde307ac3d Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 18 Sep 2025 16:04:04 +0530
Subject: [PATCH] Adding Skeleton in Project Progress Chart.

---
 .../Charts/ProjectProgressChartSkeleton.jsx   | 44 +++++++++++++++++++
 .../{Dashboard => Charts}/TeamsSkeleton.jsx   |  0
 .../Dashboard/ProjectProgressChart.jsx        | 13 +++---
 src/components/Dashboard/Projects.jsx         |  2 +-
 src/components/Dashboard/Tasks.jsx            |  3 +-
 src/components/Dashboard/Teams.jsx            |  2 +-
 6 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Charts/ProjectProgressChartSkeleton.jsx
 rename src/components/{Dashboard => Charts}/TeamsSkeleton.jsx (100%)

diff --git a/src/components/Charts/ProjectProgressChartSkeleton.jsx b/src/components/Charts/ProjectProgressChartSkeleton.jsx
new file mode 100644
index 00000000..c2d89404
--- /dev/null
+++ b/src/components/Charts/ProjectProgressChartSkeleton.jsx
@@ -0,0 +1,44 @@
+// ProjectProgressChartSkeleton.jsx
+import React from "react";
+
+const ProjectProgressChartSkeleton = () => {
+  return (
+    <div className="card" style={{ minHeight: "400px" }}>
+      <div className="card-header">
+        <div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
+          {/* Left: Title */}
+          <div className="card-title text-start">
+            <div className="placeholder-glow">
+              <span className="placeholder col-6 mb-2"></span>
+              <span className="placeholder col-4"></span>
+            </div>
+          </div>
+        </div>
+
+        {/* Row 2: Time Range Buttons */}
+        <div className="d-flex flex-wrap mt-2">
+          {Array(7)
+            .fill(0)
+            .map((_, idx) => (
+              <span
+                key={idx}
+                className="placeholder bg-light col-1 me-2"
+                style={{ height: "25px", borderRadius: "5px" }}
+              ></span>
+            ))}
+        </div>
+      </div>
+
+      <div className="card-body">
+        <div
+          className="placeholder-glow"
+          style={{ height: "250px", width: "100%" }}
+        >
+          <span className="placeholder bg-light col-12 h-100"></span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectProgressChartSkeleton;
diff --git a/src/components/Dashboard/TeamsSkeleton.jsx b/src/components/Charts/TeamsSkeleton.jsx
similarity index 100%
rename from src/components/Dashboard/TeamsSkeleton.jsx
rename to src/components/Charts/TeamsSkeleton.jsx
diff --git a/src/components/Dashboard/ProjectProgressChart.jsx b/src/components/Dashboard/ProjectProgressChart.jsx
index 3ca2a05c..a54190de 100644
--- a/src/components/Dashboard/ProjectProgressChart.jsx
+++ b/src/components/Dashboard/ProjectProgressChart.jsx
@@ -3,6 +3,7 @@ import LineChart from "../Charts/LineChart";
 import { useProjects } from "../../hooks/useProjects";
 import { useDashboard_Data } from "../../hooks/useDashboard_Data";
 import { useSelector } from "react-redux";
+import ProjectProgressChartSkeleton from "../Charts/ProjectProgressChartSkeleton";
 
 const ProjectProgressChart = ({
   ShowAllProject = true,
@@ -100,11 +101,10 @@ const ProjectProgressChart = ({
           {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
             <button
               key={key}
-              className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
-                range === key
+              className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${range === key
                   ? "border-bottom border-primary text-primary"
                   : "text-muted"
-              }`}
+                }`}
               style={{ cursor: "pointer", transition: "all 0.2s ease" }}
               onClick={() => setRange(key)}
             >
@@ -114,14 +114,17 @@ const ProjectProgressChart = ({
         </div>
       </div>
 
-      <div className="card-body" >
+      {isLineChartLoading ? (
+        <ProjectProgressChartSkeleton />
+      ) : (
         <LineChart
           seriesData={lineChartSeries}
           categories={lineChartCategories}
           loading={isLineChartLoading}
           lineChartCategoriesDates={lineChartCategoriesDates}
         />
-      </div>
+      )}
+
     </div>
   );
 };
diff --git a/src/components/Dashboard/Projects.jsx b/src/components/Dashboard/Projects.jsx
index 6a944755..db7dad52 100644
--- a/src/components/Dashboard/Projects.jsx
+++ b/src/components/Dashboard/Projects.jsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
 import GlobalRepository from "../../repositories/GlobalRepository";
-import TeamsSkeleton from "./TeamsSkeleton";
+import TeamsSkeleton from "../Charts/TeamsSkeleton";
 
 const Projects = () => {
   const { projectsCardData,loading  } = useDashboardProjectsCardData();
diff --git a/src/components/Dashboard/Tasks.jsx b/src/components/Dashboard/Tasks.jsx
index 3530ed94..cb431d78 100644
--- a/src/components/Dashboard/Tasks.jsx
+++ b/src/components/Dashboard/Tasks.jsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
-import TeamsSkeleton from "./TeamsSkeleton";
-
+import TeamsSkeleton from "../Charts/TeamsSkeleton";
 const TasksCard = () => {
   const projectId = useSelector((store) => store.localVariables?.projectId);
   const { tasksCardData, loading, error } = useDashboardTasksCardData(projectId);
diff --git a/src/components/Dashboard/Teams.jsx b/src/components/Dashboard/Teams.jsx
index b3227970..9303909d 100644
--- a/src/components/Dashboard/Teams.jsx
+++ b/src/components/Dashboard/Teams.jsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
-import TeamsSkeleton from "./TeamsSkeleton";
+import TeamsSkeleton from "../Charts/TeamsSkeleton";
 
 const Teams = () => {
   const projectId = useSelector((store) => store.localVariables?.projectId);