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.
Teodor
June 21, 2022, 7:27am
2
So what’s the expression used?
bpj
June 21, 2022, 7:32am
3
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?
bpj
June 21, 2022, 7:46am
6
If you’re calling serverconnect on the page it’s the id of the server connect component you used. In your case serverconnectUserBudgets
Teodor
June 21, 2022, 7:47am
7
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
Thanks
1 Like
Mozzi
June 21, 2022, 9:12am
9
this might also solve my issue.. posted here
<div dmx-hide="latestauctiondateview.data.hasItems()">
latestauctiondateview
<dmx-serverconnect id="latestauction" url="/api/FrontEnd/auctions_upcoming" sockets="true"></dmx-serverconnect>
<dmx-data-view id="latestauctiondateview" dmx-bind:data="latestauction.data.repeatquery1" ...
on desktop the timing of the pre-loader is perfect… it just on mobile… weird… that is why I’m stuck with no answer in my brain … its like a split second…
Thank you for having a look…
using
dmx-bind:show="serverconnectname.status == 200 or
dmx-bind:show="serverconnectname.state != 'loading'