# Best way to wait until library has been loaded

**URL:** <https://discourse.nodered.org/t/best-way-to-wait-until-library-has-been-loaded/47877>\
**Category:** Developing Nodes\
**Created:** [1 July 2021 05:40 UTC](https://discourse.nodered.org/t/best-way-to-wait-until-library-has-been-loaded/47877 "2021-07-01T05:40:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 July 2021 05:40 UTC](https://discourse.nodered.org/t/best-way-to-wait-until-library-has-been-loaded/47877/1 "2021-07-01T05:40:14Z")

</div>

Hi folks,  
In one of my custom nodes, I need to make sure that a series of js script files are loaded before I show the config screen of my node.

Moreover my node has a config node, and the settings on my config node's config screen determine which files should be loaded. So when I return from my config node to my node's config screen, I should also make sure all files are loaded.

Should I show a progress bar in the `oneditprepare`, or are there other ways to achieve that?

And in case of a progressbar, is there a standard Node-RED progress bar that I can use?

Thanks!  
Bart

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [1 July 2021 06:32 UTC](https://discourse.nodered.org/t/best-way-to-wait-until-library-has-been-loaded/47877/2 "2021-07-01T06:32:56Z")

</div>

> [@BartButenaers](#):
>
> progressbar

For simplicity sake, you could have a "please wait" message and a font awesome spinner.

Or a "Loading X of 6" where X is counting up (plus a font awesome spinner 😉 )

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 July 2021 20:29 UTC](https://discourse.nodered.org/t/best-way-to-wait-until-library-has-been-loaded/47877/3 "2021-07-01T20:29:29Z")

</div>

> [@Steve-Mcl](#):
>
> you could have a "please wait" message and a font awesome spinner.

Thanks Steve for the suggestion!  
I assume I need to handle everything from scratch: show the spinner, disable user input, show visually that everything is disabled. Or are you referring to some kind of magic spinner, that takes care of this?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [1 July 2021 20:34 UTC](https://discourse.nodered.org/t/best-way-to-wait-until-library-has-been-loaded/47877/4 "2021-07-01T20:34:42Z")

</div>

> [@BartButenaers](#):
>
> I assume I need to handle everything from scratch: show the spinner, disable user input, show visually that everything is disabled

Yeah

Or hide the outer form div until ready.

The fa-spin class does the spinning. See Animated Icons half way down the [examples page](https://fontawesome.com/v4.7/examples/)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [1 July 2021 20:52 UTC](https://discourse.nodered.org/t/best-way-to-wait-until-library-has-been-loaded/47877/5 "2021-07-01T20:52:43Z")

</div>

There is a built-in spinner you can use.... I just can't recall what the api is. Will look it up and point you in the right direction in the morning.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [2 July 2021 07:47 UTC](https://discourse.nodered.org/t/best-way-to-wait-until-library-has-been-loaded/47877/6 "2021-07-02T07:47:07Z")

</div>

The standard spinner image we use in the editor is `red/images/spin.svg`.

So you could do: `<img src="red/images/spin.svg"/>`. But you'd have to size and position it to meet your needs.

As an alternative, we also provide a CSS class as a convenience (that would also allow a custom theme to replace the spinner with its own). I would probably recommend this approach:

`<i class="spinner"></i>`

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 August 2021 07:48 UTC](https://discourse.nodered.org/t/best-way-to-wait-until-library-has-been-loaded/47877/7 "2021-08-31T07:48:04Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.