Skip to content

fix: add loading placeholder to dashboard list pages#541

Merged
need4deed merged 4 commits into
need4deed-org:developfrom
Cy-fox:fix/dashboard-list-loading-placeholder-424
May 20, 2026
Merged

fix: add loading placeholder to dashboard list pages#541
need4deed merged 4 commits into
need4deed-org:developfrom
Cy-fox:fix/dashboard-list-loading-placeholder-424

Conversation

@Cy-fox
Copy link
Copy Markdown
Collaborator

@Cy-fox Cy-fox commented May 19, 2026

Closes #424

Dashboard Volunteer, Opportunity, and Agent lists had no loading state, causing a layout collapse and giving the impression of empty results while data was being fetched from the API. Each list controller now returns a centred loading message with a min-height container while isLoading is true, preventing the layout shift.

Changes:

  • Add shared DashboardListLoading component (common/) with min-height and centred layout
  • VolunteerListController: destructure isLoading from useGetQuery, return placeholder while loading
  • OpportunityListController: same
  • AgentListController: same

Cy-fox added 2 commits May 18, 2026 11:04
…payload

appointmentDistrict is server-calculated from the postcode and should
never be sent by the client. The display now reads the localized district
title directly from the API response and renders it as "<postcode>, <district>"
in a single row. The separate district field is removed from both the display
and edit views, and the field is dropped from the PATCH payload type and form
schema.

Changes:
- useUpdateOpportunityAccompanyingDetails: remove appointmentDistrict from payload type
- accompanyingDetailsSchema: remove appointmentDistrict field
- helpers: remove appointmentDistrict from getInitialFormValues
- AccompanyingDetailsEdit: remove district Controller and its three props
- AccompanyingDetails: compute postcodeDisplay from opportunity.accompanyingDetails
  using localized Option title with de fallback; drop appointmentDistrict from onSubmit
- AccompanyingDetailsDisplay: merge postcode and district into one row using postcodeDisplay prop
Dashboard Volunteer, Opportunity, and Agent lists had no loading
state, causing a layout shift and giving the impression of empty
results while data was being fetched. Each list controller now shows
a centred loading message with a min-height placeholder while
isLoading is true.

Changes:
- Add shared DashboardListLoading component with min-height container
- VolunteerListController: destructure isLoading, return placeholder while loading
- OpportunityListController: same
- AgentListController: same
Copy link
Copy Markdown
Collaborator

@nadavosa nadavosa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clean and correct. One thing to verify before merging: confirm that the translation key dashboard.home.content.loading exists in both locale files — it is not in this diff. If it is already there, good to go.

nadavosa and others added 2 commits May 20, 2026 12:26
…ing conflicts

- VolunteerListController: keep DashboardListLoading guard (Cy-fox) + VolunteerTableList/TABLE_LIMIT (develop)
- AccompanyingDetails: keep district/postcode display (Cy-fox) + TranslatedIntoType import (develop)
- AccompanyingDetailsDisplay: keep postcodeDisplay prop
- helpers.ts: use develop's formatTimeForDisplay (form state already local) and direct appointmentPostcode access

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@need4deed need4deed merged commit acca2f6 into need4deed-org:develop May 20, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UX Feature: Add loading placeholder for Dashboard lists

3 participants