Query manager data changes during SPA navigation causing UI flash

Wappler General Bugs
1

Wappler 7.3.9
MacOS
NodeJS (SPA)

Issue description

When navigating away from a page using internal SPA navigation (links with internal attribute), the Query Manager component changes its data immediately before the new page fragment is loaded. This causes conditional UI elements that depend on query parameters to flash briefly during the transition.

Steps to reproduce

  1. Create a page with a Query Manager to read URL parameters:
<dmx-query-manager id="qm_params"></dmx-query-manager>
  1. Add a conditional alert based on the query parameter:
<!-- Shows when no ID in URL -->
<div class="alert alert-warning" dmx-show="!qm_params.data.id">
    Missing ID - This page requires a valid ID in the URL.
</div>
  1. Load the page with a valid ID in the URL (e.g. /page?id=123)
  2. Click any internal navigation link to navigate away from the page (e.g. /hello)

Expected behavior

The page should smoothly transition to the new route without showing the "Missing ID" alert, as the user is navigating away.

Actual behavior

During the navigation transition, the URL in the browser assumes the new link, and therefore the "Missing ID" alert briefly flashes because qm_params.data.id becomes undefined/null before the page fragment is fully replaced.

Request

Could Wappler provide:

  1. A way to prevent Query Manager data from changing until the new page fragment is loaded, OR
  2. A reliable property/flag to detect when SPA navigation is in progress, OR
  3. Documentation on the recommended pattern for handling this scenario

I believe option 1 would be preferable, because if you don't freeze Query Manager data during SPA navigation, then any Server Connects that rely on such will also be triggered on data change, potentially cascading issues to other conditional views:

<dmx-serverconnect id="sc_get_data" url="/api/endpoint" dmx-param:id="qm_params.data.id"></dmx-serverconnect>
3

The view component has a loading data property which is true when a page is being loaded. So for the show you could probably use dmx-show="!content.loading && !qm_params.data.id".

In a very old version of App Connect we had it that the content was destroyed directly on navigation and new content created when it was downloaded. This also caused a flash of content disappearing for a short period. We decided it was better to keep the old content and replace it after the new content was successful loaded. The only disadvantage of this is that the content is still interactive during load, but it was a better experience overall.

I could destroy/disable the query manager during load, but I believe it updated its data just before the route loading so that will still cause a flash. Also when I destroy the query manager your expression !qm_params.data.id will resolve to true making the alert visible.

4

Couldn't the query manager freeze as soon as the URL (excluding GET parameters) changes? (before processing the GET parameters) And it unfreezes once the view is loaded?

5

Where is the query manager located on your page relative to the view component? Is it on the main template above or after the view, or is it located on the content page loaded into the view?

6

This query manager is inside the content page

7

Can you test if the following update fixes the flashing.

dmxStateManagement.zip (5.1 KB)

8

Seems to have fixed the flashing concerning query manager, thank you!

10

Fixed in Wappler 7.5.1

12

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.