How can I show a message while a table is being rendered?

  • 1
  • Problem
  • Updated 7 months ago
  • Solved
I have a table that runs a lengthy javascript routine on 3 fields in each row. Rendering the table takes long enough that users will not wait patiently. I would like a put a message in front of them until the rendering is complete. What is a known, proven, and reliable method for doing this in version 11.1.6? Millau seems to have introduced a new rendering scheme that makes prior methods unreliable. Please tell me what is supposed to work and I will tell you if it does or not. If it helps, the table is inside a tab and has a pagetitle above it.
Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb
  • irritated

Posted 7 months ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
You can use blockui for this.

http://malsup.com/jquery/block/#page
Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb
In Brooklyn, I use jQuery.blockUI() in the snippet that runs as a custom renderer for the field in the table. I get the message "Please wait" while the table is rendered. In Millau, jQuery.blockUI() either does not work, or the rendering of the table happens in a way that the message is never displayed. I have played with skuid.$.blockUI({message:'<h1>please wait</h1>'}) and sometimes get a message and sometimes not, depending on where I call the snippet. On a table field custom renderer: nothing.
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hi Mike, if you are able to block the UI reliably, you could add an event-triggered action sequence to your page to run an action to unblock the UI when the Skuid: page rendered event is fired. That's a declarative way to fire off actions once the UI is finished rendering.

If this doesn't fit your use case, you could still do something similar, and in your snippet, publish an event called "table rendered" or something like that, then set up an event-triggered action sequence to unblock the UI. It sounds like the underlying need may be to set up a deferred promise, then resolve it when the rendering is done. 

The general idea has been discussed in various conversations on our Community, but here's a good instance if you haven't seen it before: https://community.skuid.com/skuid/topics/mixing-actions-and-snippets

Here's some info on publishing events via script: https://docs.skuid.com/latest/en/skuid/api/skuid_events.html#skuid-events. If you can find the right time to publish an event, then the rest can be handled declaratively via event-triggered Action Sequences: https://docs.skuid.com/latest/en/skuid/action-framework/action-sequences/#event-triggered-sequences
Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb
As it turns out, I am able to use a Tab action to show a message and block the UI. The problem I was encountering is a conflict between that action message and skuid.$.blockUI() in the javascript that runs on the cells of the table as it is rendered.
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Thanks very much for closing the loop, Mike. Are you all set with this issue now?
Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb
The page is in user acceptance testing. We'll consider it good for now, and hope your engineers understand what's going on behind the scenes. Thanks!