Skip to content

Story/am 437 laadscherm bij lang wachten uitbreiden - #574

Open
WouterAms wants to merge 8 commits into
mainfrom
story/AM-437-laadscherm-bij-lang-wachten-uitbreiden
Open

Story/am 437 laadscherm bij lang wachten uitbreiden#574
WouterAms wants to merge 8 commits into
mainfrom
story/AM-437-laadscherm-bij-lang-wachten-uitbreiden

Conversation

@WouterAms

@WouterAms WouterAms commented Aug 6, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Contributor

Changes

Pull request overview

This PR extends the app’s loading experience by enhancing the shared PleaseWait component with optional “long wait” textual feedback (timer-based), and then wiring that enhanced feedback into many module loading states for a more informative UX during slow network calls.

Changes:

  • Enhanced PleaseWait to optionally display timed feedback based on either RTK Query startedTimeStamp or a mount-based timer (showFeedback).
  • Updated many screens/components to pass startedTimeStamp or showFeedback to PleaseWait, and added consistent inset="md" usage for SomethingWentWrong in several places.
  • Hid stack headers for a few routes where full-screen presentation is desired.

Test instructions

Other notes

@WouterAms
WouterAms requested review from a team and Copilot August 6, 2026 13:39
@github-actions github-actions Bot added module:boat-charging Module touched based on changed src/modules folder(s). module:burning-guide Module touched based on changed src/modules folder(s). module:city-pass Module touched based on changed src/modules folder(s). module:construction-work Module touched based on changed src/modules folder(s). module:construction-work-editor Module touched based on changed src/modules folder(s). module:contact Module touched based on changed src/modules folder(s). module:elections Module touched based on changed src/modules folder(s). module:home Module touched based on changed src/modules folder(s). module:news Module touched based on changed src/modules folder(s). module:notification-history Module touched based on changed src/modules folder(s). module:parking Module touched based on changed src/modules folder(s). module:pride Module touched based on changed src/modules folder(s). module:redirects Module touched based on changed src/modules folder(s). module:service Module touched based on changed src/modules folder(s). module:survey Module touched based on changed src/modules folder(s). module:user Module touched based on changed src/modules folder(s). module:waste-guide Module touched based on changed src/modules folder(s). labels Aug 6, 2026
@WouterAms
WouterAms enabled auto-merge August 6, 2026 13:41
Copilot AI reviewed Aug 6, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

This PR extends the app’s loading experience by enhancing the shared PleaseWait component with optional “long wait” textual feedback (timer-based), and then wiring that enhanced feedback into many module loading states for a more informative UX during slow network calls.

Changes:

  • Enhanced PleaseWait to optionally display timed feedback based on either RTK Query startedTimeStamp or a mount-based timer (showFeedback).
  • Updated many screens/components to pass startedTimeStamp or showFeedback to PleaseWait, and added consistent inset="md" usage for SomethingWentWrong in several places.
  • Hid stack headers for a few routes where full-screen presentation is desired.

Reviewed changes

Copilot reviewed 73 out of 73 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/modules/waste-guide/screenConfig.ts Hides header for recycle point map route.
src/modules/waste-guide/components/WasteGuide.tsx Enables timed loading feedback while fetching address/waste guide.
src/modules/waste-guide/components/recyclepoints/WasteGuideSelectRecyclePoint.tsx Passes startedTimeStamp to loading state; adds inset to error state.
src/modules/waste-guide/components/recyclepoints/WasteGuideRecyclePointMap.tsx Enables timed loading feedback; adds inset to error state.
src/modules/waste-guide/components/recyclepoints/WasteGuideRecyclePoint.tsx Enables timed loading feedback during active recycle point loading.
src/modules/waste-guide/components/calendar/WasteGuideCalendar.tsx Adds inset to error states; enables timed loading feedback.
src/modules/user/components/notification-settings/NotificationSettings.tsx Enables timed loading feedback while loading notification settings data.
src/modules/user/components/module-settings/ModuleSettings.tsx Enables timed loading feedback for module settings loading UI.
src/modules/survey/components/DynamicForm.tsx Passes startedTimeStamp into loading UI for survey config fetch.
src/modules/service/components/ServicesGrid.tsx Passes startedTimeStamp into loading UI for service overview fetch.
src/modules/service/components/ServicePointMap.tsx Passes startedTimeStamp into loading UI for service map fetch.
src/modules/service/components/ServicePointList.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/service/components/bottomsheet/ServiceMapLegend.tsx Removes wrapper Box, adds inset to error state, and passes startedTimeStamp to loading UI.
src/modules/redirects/components/Redirects.tsx Enables timed loading feedback on redirects loading UI.
src/modules/pride/screens/PrideEventDetails.screen.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/pride/components/PrideEventTypeBottomSheet.tsx Passes startedTimeStamp into loading UI in bottom sheet.
src/modules/pride/components/PrideEventsList.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/pride/components/PrideEventDateBottomSheet.tsx Passes startedTimeStamp into loading UI in bottom sheet.
src/modules/parking/screens/ParkingDashBoard.screen.tsx Passes startedTimeStamp from permits hook into loading UI.
src/modules/parking/providers/CurrentPermitProvider.tsx Enables timed loading feedback while loading current permit view.
src/modules/parking/hooks/useGetPermits.ts Exposes RTK Query startedTimeStamp to consumers.
src/modules/parking/components/session/ParkingPlannedSessionsSummary.tsx Enables timed loading feedback during planned sessions load.
src/modules/parking/components/session/ParkingActiveSessionsSummary.tsx Enables timed loading feedback during active sessions load.
src/modules/parking/components/select-permit/ParkingSelectPermit.tsx Adds inset to “something went wrong” state.
src/modules/parking/components/permit-zone/ParkingPermitZoneMap.tsx Passes startedTimeStamp into loading UI; adjusts error UI wrapper/inset.
src/modules/parking/components/permit-zone/ParkingMachineSearch.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/parking/components/permit-zone/ParkingMachineList.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/parking/components/permit-zone/bottomsheet/ParkingMachineBottomSheetContent.tsx Passes startedTimeStamp into loading UI within machine details section.
src/modules/parking/components/ParkingMyLicensePlates.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/parking/components/form/ParkingSessionSelectLicensePlate.tsx Enables timed loading feedback during license plate loading.
src/modules/parking/components/form/ParkingSessionAddLicensePlate.tsx Enables timed loading feedback during add-license-plate loading.
src/modules/parking/components/form/ParkingReceipt.tsx Enables timed loading feedback while loading receipt/account state.
src/modules/parking/components/form/ParkingIncreaseBalanceReceipt.tsx Passes startedTimeStamp into loading UI for account details fetch.
src/modules/parking/components/dashboard/ParkingPermitBalanceMoney.tsx Passes startedTimeStamp into loading UI for account details fetch.
src/modules/notification-history/components/NotificationHistory.tsx Passes startedTimeStamp into loading UI for notification history fetch.
src/modules/news/components/SelectDistrictBottomSheet.tsx Passes startedTimeStamp into loading UI for districts fetch.
src/modules/news/components/NewsList.tsx Enables timed loading feedback for list-empty loading UI.
src/modules/news/components/NewsHighlights.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/news/components/NewsDashboardHighlightedArticle.tsx Passes startedTimeStamp into loading UI for highlighted article fetch.
src/modules/news/components/NewsArticle.tsx Enables timed loading feedback while loading article content.
src/modules/news/components/liveblog/Liveblog.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/home/components/Home.tsx Enables timed loading feedback while loading enabled modules.
src/modules/elections/components/PollingStationsMap.tsx Enables timed loading feedback; adds inset to error state.
src/modules/elections/components/PollingStationsList.tsx Enables timed loading feedback; adds inset to error state.
src/modules/contact/components/city-offices/SelectCityOffice.tsx Passes startedTimeStamp into loading UI for city offices fetch.
src/modules/contact/components/city-offices/CityOffice.tsx Passes startedTimeStamp into loading UI for city offices fetch.
src/modules/construction-work/components/projects/ListEmptyComponent.tsx Enables timed loading feedback for list-empty loading UI.
src/modules/construction-work/components/project/ProjectWarning.tsx Enables timed loading feedback; adds inset to error state.
src/modules/construction-work/components/project/ProjectNews.tsx Passes startedTimeStamp into loading UI for project news fetch.
src/modules/construction-work/components/project/ProjectArticle.tsx Passes startedTimeStamp into loading UI for project details fetch.
src/modules/construction-work/components/project/Project.tsx Passes startedTimeStamp into loading UI for project details fetch.
src/modules/construction-work/components/article/ArticleOverview.tsx Passes startedTimeStamp into loading UI for articles fetch.
src/modules/construction-work-editor/components/AuthorizedProjects.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/city-pass/screenConfig.ts Hides header for budget and security code routes.
src/modules/city-pass/components/transactions/DiscountTransactions.tsx Passes startedTimeStamp into loading UI for discount transactions fetch.
src/modules/city-pass/components/transactions/BudgetTransactions.tsx Passes startedTimeStamp into loading UI for budget transactions fetch.
src/modules/city-pass/components/details/SecurityCode.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/city-pass/components/details/CityPassDetails.tsx Passes startedTimeStamp into loading UI for city passes fetch.
src/modules/city-pass/components/Budget.tsx Passes startedTimeStamp into loading UI for city passes fetch.
src/modules/burning-guide/components/BurningGuide.tsx Enables timed loading feedback during forecast loading.
src/modules/boat-charging/screens/BoatChargingTermsAndConditions.screen.tsx Enables timed loading feedback during terms loading.
src/modules/boat-charging/screens/BoatChargingGuestEmailConfirm.screen.tsx Adds inset to error state.
src/modules/boat-charging/components/session/BoatChargingSession.tsx Enables timed loading feedback; adds inset to error state.
src/modules/boat-charging/components/history/BoatChargingHistory.tsx Enables timed loading feedback for initial history loading state.
src/modules/boat-charging/components/bottomsheet/BoatChargingPointDetails.tsx Passes startedTimeStamp into loading UI; adds inset to error state.
src/modules/boat-charging/components/BoatChargingMap.tsx Enables timed loading feedback; adds inset to error state.
src/modules/boat-charging/components/BoatChargingList.tsx Enables timed loading feedback; adds inset to error state.
src/modules/boat-charging/components/BoatChargingHistorySessionDetails.tsx Enables timed loading feedback during details loading.
src/modules/boat-charging/components/BoatChargingDetails.tsx Enables timed loading feedback during combined loading state.
src/components/ui/feedback/PleaseWait.tsx Adds timer-based textual feedback support (startedTimeStamp / showFeedback).
src/components/ui/feedback/PleaseWait.test.tsx Adds unit tests for timer-based feedback behavior.
src/components/ui/feedback/PleaseWait.stories.tsx Adds Storybook stories for 5s and 15s elapsed feedback states.
src/components/ui/containers/WebView.tsx Enables timed loading feedback for WebView loading renderer.

Comment thread src/modules/parking/components/permit-zone/ParkingPermitZoneMap.tsx
Comment thread src/components/ui/feedback/PleaseWait.tsx Outdated
Comment thread src/components/ui/feedback/PleaseWait.tsx
WouterAms and others added 3 commits August 6, 2026 17:00
@WouterAms
Potential fix for pull request finding
3a1028e 
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@WouterAms
Potential fix for pull request finding
18239c8 
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@WouterAms
Fix debug temp inversion
9f0ea62
@github-actions github-actions Bot added the Copilot ready All Copilot comments are resolved label Aug 6, 2026
RikSchefferAmsterdam
RikSchefferAmsterdam approved these changes Aug 7, 2026
View reviewed changes
Comment thread src/components/ui/feedback/PleaseWait.tsx
) {
return 'Gegevens worden geladen'
} else if (elapsedTime >= SECOND_TIMEOUT_VALUE) {
return 'Dit duurt langer dan normaal. \n We zijn nog bezig.'

@RikSchefferAmsterdam RikSchefferAmsterdam Aug 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

de tweede regel begint nu met een spatie

Suggested change
return 'Dit duurt langer dan normaal. \n We zijn nog bezig.'
return 'Dit duurt langer dan normaal. \nWe zijn nog bezig.'

Comment thread src/components/ui/feedback/PleaseWait.tsx
}

const interval = setInterval(() => {
setElapsedTime(Math.abs(dayjs(countFrom).diff()))

@RikSchefferAmsterdam RikSchefferAmsterdam Aug 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Als je als unit second meegeeft, dan hoef je niet door 1000 te delen later:

Suggested change
setElapsedTime(Math.abs(dayjs(countFrom).diff()))
setElapsedTime(Math.abs(dayjs(countFrom).diff(dayjs(), 'second')))

docs: https://day.js.org/docs/en/display/difference

Comment thread src/components/ui/feedback/PleaseWait.tsx

const elapsedSeconds = Math.floor(elapsedTime / 1000)

const feedback = useMemo(

@RikSchefferAmsterdam RikSchefferAmsterdam Aug 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

ik denk dat het berekenen van de cache check (van useMemo om te kijken of de oude waarde gebruikt moet worden) meer rekenkracht kost hier dan getElapsedTimeFeedback zelf uitvoeren

@github-actions github-actions Bot added the Code reviewed PR has been reviewed by a team member. label Aug 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@RikSchefferAmsterdam RikSchefferAmsterdam RikSchefferAmsterdam approved these changes

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

Code reviewed PR has been reviewed by a team member. Copilot ready All Copilot comments are resolved module:boat-charging Module touched based on changed src/modules folder(s). module:burning-guide Module touched based on changed src/modules folder(s). module:city-pass Module touched based on changed src/modules folder(s). module:construction-work Module touched based on changed src/modules folder(s). module:construction-work-editor Module touched based on changed src/modules folder(s). module:contact Module touched based on changed src/modules folder(s). module:elections Module touched based on changed src/modules folder(s). module:home Module touched based on changed src/modules folder(s). module:news Module touched based on changed src/modules folder(s). module:notification-history Module touched based on changed src/modules folder(s). module:parking Module touched based on changed src/modules folder(s). module:pride Module touched based on changed src/modules folder(s). module:redirects Module touched based on changed src/modules folder(s). module:service Module touched based on changed src/modules folder(s). module:survey Module touched based on changed src/modules folder(s). module:user Module touched based on changed src/modules folder(s). module:waste-guide Module touched based on changed src/modules folder(s).

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@WouterAms @RikSchefferAmsterdam