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
- Create a page with a Query Manager to read URL parameters:
<dmx-query-manager id="qm_params"></dmx-query-manager>
- 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>
- Load the page with a valid ID in the URL (e.g.
/page?id=123) - 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:
- A way to prevent Query Manager data from changing until the new page fragment is loaded, OR
- A reliable property/flag to detect when SPA navigation is in progress, OR
- 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>