Best way to wait until library has been loaded

Developing Nodes
1

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

2

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 :wink: )

3

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?

4

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

1 Like
5

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.

2 Likes
6

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>

7

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