Adding Skeleton in ProjectCompletionChart.

src/components/Charts/ProjectCompletionChartSkeleton.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+const ProjectCompletionChartSkeleton = () => {
+  return (
+    <div className="card h-100">
+      <div className="card-header d-flex align-items-start justify-content-between">
+        <div className="card-title mb-0 text-start">
+          <h5 className="mb-1 fw-bold placeholder-glow">
+            <span className="placeholder col-6 bg-light"></span>
+          </h5>
+          <p className="card-subtitle placeholder-glow">
+            <span className="placeholder col-8 bg-light"></span>
+          </p>
+        </div>
+      </div>
+      {/* Keep a fixed height so card doesn't shrink */}
+      <div className="card-body" >
+        <div className="placeholder-glow">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div
+              key={i}
+              className="placeholder col-12 mb-2 bg-light"
+              style={{ height: "20px", borderRadius: "4px" }}
+            ></div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCompletionChartSkeleton;

src/components/Dashboard/AttendanceChart.jsx

@@ -100,7 +100,7 @@ const AttendanceOverview = () => {
 
   return (
     <div
-      className="bg-white p-4 rounded shadow d-flex flex-column"
+      className="bg-white p-4 rounded shadow d-flex flex-column" 
     >
       {/* Header */}
       <div className="d-flex justify-content-between align-items-center mb-3">

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -1,11 +1,13 @@
 import React from "react";
 import HorizontalBarChart from "../Charts/HorizontalBarChart";
 import { useProjects } from "../../hooks/useProjects";
+import ProjectCompletionChartSkeleton from "../Charts/ProjectCompletionChartSkeleton";
 
 const ProjectCompletionChart = () => {
   const { projects, loading } = useProjects();
 
-  // Bar chart logic
+  if (loading) return <ProjectCompletionChartSkeleton />;
+
   const projectNames = projects?.map((p) => p.name) || [];
   const projectProgress =
     projects?.map((p) => {
@@ -16,14 +18,15 @@ const ProjectCompletionChart = () => {
     }) || [];
 
   return (
-    <div className="card h-100">
+    <div className="card" style={{ minHeight: "490px" }}>
       <div className="card-header d-flex align-items-start justify-content-between">
         <div className="card-title mb-0 text-start">
-          <h5 className="mb-1 fw-bold ">Projects</h5>
+          <h5 className="mb-1 fw-bold">Projects</h5>
           <p className="card-subtitle">Projects Completion Status</p>
         </div>
       </div>
-      <div className="card-body">
+      {/* Keep same minHeight as skeleton to avoid shrinking */}
+      <div className="card-body" >
         <HorizontalBarChart
           categories={projectNames}
           seriesData={projectProgress}

src/components/Dashboard/ProjectProgressChart.jsx

@@ -85,7 +85,7 @@ const ProjectProgressChart = ({
     : selectedProjectData?.name;
 
   return (
-    <div className="card">
+    <div className="card" style={{ minHeight: "490px" }}>
       <div className="card-header">
         <div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
           {/* Left: Title */}
@@ -114,7 +114,7 @@ const ProjectProgressChart = ({
         </div>
       </div>
 
-      <div className="card-body">
+      <div className="card-body" >
         <LineChart
           seriesData={lineChartSeries}
           categories={lineChartCategories}