Repository navigation
BlockDetailsSkeleton
type: Component title: BlockDetailsSkeleton description: Loading skeleton for the reporting-unit block details page (issue #1369). tags: [frontend, react, reporting-unit, skeleton, loading] timestamp: 2026-10-01T00:00:00Z
BlockDetailsSkeleton renders the loading skeleton for the reporting-unit block details page. It mirrors the loaded layout using Carbon SkeletonText placeholders so the transition to real content does not shift the page.
Use BlockDetailsSkeleton when the block details page is loading. The component is rendered only after the request has been in flight for at least 300 ms (via the Delayed Flag Hook and its SKELETON_DELAY_MS constant), so fast responses never flash a skeleton.
- Source:
frontend/src/components/waste/ReportingUnits/BlockDetailsSkeleton/index.tsx - Tests: covered by the ReportingUnitBlockDetails page tests
| Name | Type | Required | Description |
|---|---|---|---|
| (none) | — | — | The skeleton is static; no props are accepted. |
| Region | Test ID | Contents |
|---|---|---|
| Page banner | block-details-skeleton |
Heading skeleton (260 px) plus a 320 px line. |
| Summary card | block-details-skeleton-summary |
Heading skeleton (200 px) plus six field lines matching the six summary fields. |
| Results region | block-details-skeleton-results |
Heading skeleton (180 px) plus three full-width lines. |
- Mirrors the loaded layout of the ReportingUnitBlockDetails page — page banner, reporting-unit summary card, and waste-volume results region.
- All placeholders are
SkeletonText; no data fetching and no state. - The page renders
nullinstead of this skeleton during the first 300 ms of loading.
- The placeholder widths are hardcoded in the component; layout adjustments require source changes.
- The skeleton mirrors the current loaded layout; adding regions to the page (slice 3) requires matching updates here.
- ReportingUnitBlockDetails — sole consumer of this skeleton.
- Delayed Flag Hook — controls when the skeleton is shown.
This wiki documents NR Waste Plus for users and developers. Verify security and deployment guidance against the current application configuration before applying it elsewhere.
- Report an issue or ask a question in the GitHub repository.
- Follow the Contributing Guidelines to propose an update.
- Read the Code of Conduct.
Collection indexes support human browsing and machine retrieval. Keep both current when adding or moving wiki pages.
NR Waste Plus Wiki | GitHub Repository