search

Altinn / app-frontend-react

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

Frontend renders componentes too early #2177

Open magnusjerre opened 1 month ago

magnusjerre commented 1 month ago

Description of the bug

After upgrading the frontend to v4 we have noticed that some components seem to be renderering before everything is ready. The Likert component is rendered (when in mobile / narrow width view) as the fullscreen variant for a few milliseconds before it renders as normal radio groups. We also noticed that the progress circle renders the state 0/n pages when navigating from a stateless part to the statefull part, this didn't happen with v3.

Steps To Reproduce

  1. Go to https://udir.apps.tt02.altinn.no/udir/pbu-dev-demo?survey=survey-6-aarstrinn5
  2. Make the viewport narrow (view as iPad Air for instance), so that any likert component is rendered as a radio group instead of a table
  3. Navigate to page 3/18, here we will see the short flicker with the wide version of the Likert component

Additional Information

The video illustrates the Likert component issue. https://github.com/Altinn/app-frontend-react/assets/3714805/1d31a672-8938-4482-a90c-41d2bac85fd8

olemartinorg commented 2 weeks ago

Assuming this happens because of a useEffect() or similar that sets some state needed for rendering this correctly. Marking it as a good-first-issue, as it doesn't seem like it requires deep knowledge of our frontend architecture - but it possibly does require a good grasp on how React renders components (rendering vs effects ++).