When loading app-frontend, the would be a moment where AppRoutingContext would be out-of-sync with the real URL, causing the wrong thing to be rendered. For example, for a brief moment the 'you're on the wrong task' screen would be visible while progressing to the next task, only to be corrected a short moment later.
This was all caused by our AppRoutingContext. While it did solve re-rendering issues when irrelevant parts of the URL changed (such as the equivalent of useNavigationParam('instanceGuid') would re-render your component when the page key in the URL changed), the current (pre this PR) AppRoutingContext also has to wait until a useEffect() is triggered to update the store, which at that point can run selectors again and cause re-renders that corrects the UI.
This fix always reads the URL from window.location, but also has the useEffect() to update the state in order to force existing components to re-render when the relevant parts of the URL changes. The URL we store in zustand is never read.
EDIT: One problem uncovered in the tests was that DataModelsProvider now had outdated state, causing validation to happen on a non-writable data type in the custom-confirm.ts test. I fixes this as well, such that DataModelsProvider hangs on a <Loader /> while updating the state.
Related Issue(s)
closes #{issue number}
Verification/QA
Manual functionality testing
[x] I have tested these changes manually
[ ] Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
[ ] No testing done/necessary
Automated tests
[ ] Unit test(s) have been added/updated
[ ] Cypress E2E test(s) have been added/updated
[x] No automatic tests are needed here (no functional changes/additions)
Description
When loading app-frontend, the would be a moment where
AppRoutingContext
would be out-of-sync with the real URL, causing the wrong thing to be rendered. For example, for a brief moment the 'you're on the wrong task' screen would be visible while progressing to the next task, only to be corrected a short moment later.This was all caused by our
AppRoutingContext
. While it did solve re-rendering issues when irrelevant parts of the URL changed (such as the equivalent ofuseNavigationParam('instanceGuid')
would re-render your component when the page key in the URL changed), the current (pre this PR)AppRoutingContext
also has to wait until auseEffect()
is triggered to update the store, which at that point can run selectors again and cause re-renders that corrects the UI.This fix always reads the URL from
window.location
, but also has theuseEffect()
to update the state in order to force existing components to re-render when the relevant parts of the URL changes. The URL we store in zustand is never read.EDIT: One problem uncovered in the tests was that DataModelsProvider now had outdated state, causing validation to happen on a non-writable data type in the
custom-confirm.ts
test. I fixes this as well, such that DataModelsProvider hangs on a<Loader />
while updating the state.Related Issue(s)
Verification/QA
kind/*
label to this PR for proper release notes grouping