Description
When we're loading data on the /dashboard routes: Agents, Opportunity and Volunteer, we get a layout shift from when the data is null to when it's populated from the backend.
This is most notable with Volunteers on /dashboard/volunteer , and it can give the impression that there are no results.
The height also causes an issue and can conflict with the layout of the footer.
Proposed solution
Use tanStack Query's isLoading state to conditionally display a placeholder.
Could be as simple as
<Heading4> {t("dashboard.loading")} <Heading4>but a lot better to create Skeleton Cards which greatly softens the layout shift.
Also propose using a responsive height for the DashboardLayout. This prevents the overlap of other components. In the global.css there is already the css var: --dashboard-home-container-min-height: 300px; which is used as a min-height on the DashboardLayout for the Home component
Description
When we're loading data on the
/dashboardroutes: Agents, Opportunity and Volunteer, we get a layout shift from when the data is null to when it's populated from the backend.This is most notable with Volunteers on
/dashboard/volunteer, and it can give the impression that there are no results.The height also causes an issue and can conflict with the layout of the footer.
Proposed solution
Use tanStack Query's
isLoadingstate to conditionally display a placeholder.Could be as simple as
but a lot better to create
Skeleton Cardswhich greatly softens the layout shift.Also propose using a responsive height for the
DashboardLayout. This prevents the overlap of other components. In theglobal.cssthere is already the css var:--dashboard-home-container-min-height: 300px;which is used as amin-heighton theDashboardLayoutfor theHomecomponent