Altinn / app-frontend-react

Altinn application React frontend
BSD 3-Clause "New" or "Revised" License
18 stars 31 forks source link

Rewriting `AppRoutingContext` to avoid late URL state problems #2707

Closed olemartinorg closed 1 week ago

olemartinorg commented 2 weeks ago

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 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)

Verification/QA

sonarcloud[bot] commented 2 weeks ago

Quality Gate Failed Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint