Adding Skeleton in Project Progress Chart.

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;

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 ${
+              className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${range === key
-                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>
   );
 };

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();

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);

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);