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

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

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