Modal with dynamic show shows for split second on page load before it hides

When you have a modal that should only show based on a data value loaded from the backend, it shows for split second before the server connect action runs to retrieve the data that would determine whether it hides or shows.

Is there a way to improve the user experience by preventing the modal show until data is confirmed?

I can post a video if what I am asking is not clear.

So what’s the expression used?

If the show expression is contingent on SC you could add that it also needs to have status 200 to show:

e.g. Show if somefield is false:

serverconnectID.status == 200 && !serverconnectID.data.somefield
2 Likes

An example of how I use it:

<div class="modal" id="modalPrimer" is="dmx-bs5-modal" tabindex="-1" dmx-bind:show="serverconnectUserBudgets.data.queryUserBudgets[0].primary!=1">

Is “serverconnectID” a value that is always the same? Determined by the framework? Or will it be different from page to page or app to app?

If you’re calling serverconnect on the page it’s the id of the server connect component you used. In your case serverconnectUserBudgets

You can check if the server action is still loading. In your case:

dmx-bind:show="serverconnectUserBudgets.state != 'loading' && serverconnectUserBudgets.data.queryUserBudgets[0].primary != 1"

or as Ben suggests check if has loaded successfully:

dmx-bind:show="serverconnectUserBudgets.status == 200 && serverconnectUserBudgets.data.queryUserBudgets[0].primary != 1"
1 Like

I figured that out right after posting :crazy_face:

Thanks

1 Like

this might also solve my issue… posted here

using

dmx-bind:show="serverconnectname.status == 200 or
dmx-bind:show="serverconnectname.state != ‘loading’