Hide Form until the loading ends

Knack Community
1

Hi Guys,

I have a code to prevent displaying a form before all rules are correctly and entirely loaded, but it stopped working and I don’t know why. Can anyone help me to understand what needs to be fixed in the code to make it work again?

Here is the JS:

var currentScene="";
$(document).on('knack-scene-render.any', function (page,scene) {
currentScene="kn-"+scene.key;
$(".kn-form").show();

});

$(document).on('knack-view-render.any', function (page,scene) {
if($("#"+currentScene).is(":visible"))
$(".kn-form").show();

});
2

I want to make sure I understand your entire question…

before all rules are correctly and entirely loaded

Here, are you referring to Display Rules, Page Rules, etc?

3

Correct! tks!

4

The code is missing curly braces:

if($("#"+currentScene).is(":visible"))
$(".kn-form").show();

This line should be:

if ($("#" + currentScene).is(":visible")) {
  $(".kn-form").show();
}

However, there’s another issue.

Your code is saying:

  • When any scene renders, show the forms
  • When any view renders, if the scene is visible, show the forms

However, the order in which the scene/views become rendered and visible can vary.

From my brief testing of two pages:

Page 1

  1. View render
  2. Scene render
  3. Scene visible

Page 2

  1. Scene render
  2. Scene visible
  3. View render

So that would make this code behave inconsistently, as well.

A more reliable approach might be to use the visibility of the spinner as a signal that things are still loading. But I haven’t tested this yet.

5

The issue with the spinner is that it disappears before the page is fully loaded. So it might be an issue also. Is there any other solution more reliable to achieve my goal?

6

@Guilherme My understanding is scene-render occurs after all view-renders have completed.

So could you set the views to be hidden with CSS so they hidden right from the start, then display them inside the scene-render event?

Not sure if all rules have completely loaded though but worth testing I think.

7

How can I change the code to use the spinner as a guide? tks!

8

Hi Guilherme,

If you want to take that approach, you can check for changes to the visibility of div element with id #kn-loading-spinner.

If you’re a programmer, this documentation on Mutation Observers (docs) should help you.

If you ever need professional help, feel free to get in contact here: https://knackpros.com