theopensystemslab / planx-new

Plan✕ is a platform for creating and publishing digital planning services
https://editor.planx.uk
Mozilla Public License 2.0
13 stars 2 forks source link

feat: Pesist `FlowEditor` state on route changes #3671

Closed DafyddLlyr closed 2 days ago

DafyddLlyr commented 5 days ago

What does this PR do?

Also..

Context

This work has come about as a result of search, but has addressed a fairly long term problem we've been facing with routing.

Search is pretty frustrating as the entire state is reset each time a link / node is clicked. Having delved into this routing / re-rendering issue unsuccessfully in the past, my first thought was to use Zustand to store the state to ensure this is persisted - please see https://github.com/theopensystemslab/planx-new/pull/3672 as an example of what this looks like.

This approach works - but I soon realised that in order for it to be functional it's not just the active tab that needs to be persisted, it's (at least) -

The same applies to all tabs, and all state within them - clearly this not a viable or maintainable solution.

Solution

It took a lot of digging and frustration to get here! 😅

It turns out that re-rendering is happening due to the use of the useLoadingRoute() hook. This hook triggers a re-render of all children once it resolves and returns a truthy value. Rather than this high-level approach, I think we need a more granular approach to page-by-page loading, or another general solution (routing loading bar?).

Demo

Issue Before (Staging) After (Pizza)
FOUC on route change
FlowEditor state lost when modal opened

Outstanding questions

How should we handle genuine loading screens between pages, where a re-render isn't a problem?

Some first thoughts -

We do need some UI here, because whilst removing the FOUC is a big win both visually and in terms of state management (imho!), I do acknowledge that clicking certain links now feels more sluggish as there's a wait between click and visual result. Prime examples here are creating and loading flows.

github-actions[bot] commented 5 days ago

Removed vultr server and associated DNS entries

DafyddLlyr commented 3 days ago

Moved to draft, hit a bug here where I can't route to internal portals. Will re-open once fixed.

DafyddLlyr commented 2 days ago

I have an implementation of a loading bar here - https://github.com/theopensystemslab/planx-new/pull/3684

Thoughts welcome!