# Hide Form until the loading ends

**URL:** <https://forums.knack.com/t/hide-form-until-the-loading-ends/12407>\
**Category:** Knacksters' Idea Lab\
**Created:** [April 18, 2022, 7:40pm UTC](https://forums.knack.com/t/hide-form-until-the-loading-ends/12407 "2022-04-18T19:40:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Guilherme](https://avatars.discourse-cdn.com/v4/letter/g/77aa72/32.png) [@Guilherme](https://forums.knack.com/u/Guilherme)\
**Post date:** [April 18, 2022, 7:40pm UTC](https://forums.knack.com/t/hide-form-until-the-loading-ends/12407/1 "2022-04-18T19:40:16Z")

</div>

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:

```auto
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();

});

```

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [April 19, 2022, 7:07am UTC](https://forums.knack.com/t/hide-form-until-the-loading-ends/12407/2 "2022-04-19T07:07:50Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Guilherme](https://avatars.discourse-cdn.com/v4/letter/g/77aa72/32.png) [@Guilherme](https://forums.knack.com/u/Guilherme)\
**Post date:** [April 19, 2022, 10:51am UTC](https://forums.knack.com/t/hide-form-until-the-loading-ends/12407/3 "2022-04-19T10:51:05Z")

</div>

Correct! tks!

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [April 19, 2022, 6:14pm UTC](https://forums.knack.com/t/hide-form-until-the-loading-ends/12407/4 "2022-04-19T18:14:21Z")

</div>

The code is missing curly braces:

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

```

This line should be:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Guilherme](https://avatars.discourse-cdn.com/v4/letter/g/77aa72/32.png) [@Guilherme](https://forums.knack.com/u/Guilherme)\
**Post date:** [April 19, 2022, 7:55pm UTC](https://forums.knack.com/t/hide-form-until-the-loading-ends/12407/5 "2022-04-19T19:55:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [April 19, 2022, 10:43pm UTC](https://forums.knack.com/t/hide-form-until-the-loading-ends/12407/6 "2022-04-19T22:43:57Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Guilherme](https://avatars.discourse-cdn.com/v4/letter/g/77aa72/32.png) [@Guilherme](https://forums.knack.com/u/Guilherme)\
**Post date:** [April 21, 2022, 11:18am UTC](https://forums.knack.com/t/hide-form-until-the-loading-ends/12407/7 "2022-04-21T11:18:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [April 22, 2022, 6:07am UTC](https://forums.knack.com/t/hide-form-until-the-loading-ends/12407/8 "2022-04-22T06:07:06Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)) should help you.

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