admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add skeleton in Dashboard Projects, Teams and Tasks.

Browse Source
This commit is contained in:
Kartik Sharma 2025-09-15 17:42:34 +05:30
parent d70c8e5995
commit 96d349818a
4 changed files with 48 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/Dashboard/Projects.jsx
View File

@ -2,9 +2,10 @@ 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";
const Projects = () => {
const { projectsCardData } = useDashboardProjectsCardData();
const { projectsCardData,loading } = useDashboardProjectsCardData();
const [projectData, setProjectsData] = useState(projectsCardData);
useEffect(() => {
@ -13,13 +14,13 @@ const Projects = () => {
const handler = useCallback(
async (msg) => {
try {
const response =
await GlobalRepository.getDashboardProjectsCardData();
setProjectsData(response.data);
} catch (err) {
console.error(err);
}
try {
const response =
await GlobalRepository.getDashboardProjectsCardData();
setProjectsData(response.data);
} catch (err) {
console.error(err);
}
},
[GlobalRepository]
);
@ -37,20 +38,24 @@ const Projects = () => {
Projects
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{projectData.totalProjects?.toLocaleString()}
</h4>
<small className="text-muted">Total</small>
{loading ? (
<TeamsSkeleton />
) : (
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{projectData.totalProjects?.toLocaleString()}
</h4>
<small className="text-muted">Total</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{projectData.ongoingProjects?.toLocaleString()}
</h4>
<small className="text-muted">Ongoing</small>
</div>
</div>
<div>
<h4 className="mb-0 fw-bold">
{projectData.ongoingProjects?.toLocaleString()}
</h4>
<small className="text-muted">Ongoing</small>
</div>
</div>
)}
</div>
);
};

7
src/components/Dashboard/Tasks.jsx
View File

@ -1,6 +1,7 @@
import React from "react";
import { useSelector } from "react-redux";
import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
import TeamsSkeleton from "./TeamsSkeleton";
const TasksCard = () => {
const projectId = useSelector((store) => store.localVariables?.projectId);
@ -16,11 +17,7 @@ const TasksCard = () => {
{loading ? (
// Loader will be displayed when loading is true
<div className="d-flex justify-content-center align-items-center flex-grow-1">
<div className="spinner-border text-primary" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
<TeamsSkeleton/>
) : error ? (
// Error message if there's an error
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>

7
src/components/Dashboard/Teams.jsx
View File

@ -2,6 +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";
const Teams = () => {
const projectId = useSelector((store) => store.localVariables?.projectId);
@ -38,11 +39,7 @@ const Teams = () => {
{loading ? (
// Blue spinner loader
<div className="d-flex justify-content-center align-items-center flex-grow-1">
<div className="spinner-border text-primary" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
<TeamsSkeleton/>
) : error ? (
// Error message if data fetching fails
<div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>

18
src/components/Dashboard/TeamsSkeleton.jsx Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
const TeamsSkeleton = () => {
return (
<div className="d-flex justify-content-around align-items-start mt-n2 flex-grow-1">
<div>
<div className="bg-light rounded" style={{ width: "80px", height: "24px", marginBottom: "5px" }}></div>
<div className="bg-light rounded" style={{ width: "60px", height: "12px" }}></div>
</div>
<div>
<div className="bg-light rounded" style={{ width: "80px", height: "24px", marginBottom: "5px" }}></div>
<div className="bg-light rounded" style={{ width: "60px", height: "12px" }}></div>
</div>
</div>
);
};
export default TeamsSkeleton;