[Suggestion] Loading Page until node-red is ready

Dashboard
1

Can node red display some kind of loading page until it is ready to display flows?

We are not talking about the loading page in case of a failure in processing the flows.
We are talking about the loading page until the full node red is download for the end user

Thanks :smile:

2

Usually the basic frame loads quickly - though it may take slightly longer to populate the palette and then the actual flow. But it's usually around the second mark on a laptop. What sort of delays are you seeing ? What devices are you using for server and client and what speed is the network ?

3

You are absolutely right. However, Because I am using the SVG node , it led to an increase in the size of website. Actually I had to modify setting.js to adjust the 5mb limit to make it bigger. Hence, the website currently requires to download at least 8mb. So, if I am accessing the website from internet, I need to wait several seconds ( 4g connection). :slight_smile:

4

Sorry - just to check - is this for loading the editor ? or the dashboard ?

5

This is for the dashboard

6

OK I'll move it to the #dashboard area then.

7

There is already a loading page ... I see it very often when I restart my hole flow because it is heavy and doing a lot of stuff.
For me there is another question @dceejay: Is it possible to modify this? I have already ā€œplaced (a lot of) nodes on the dashboardā€ :wink:

8

I must admit I did think there was something already there (in dashboard) - but haven't looked at that code for ages, so wasn't sure. I think it's currently built into the index page so not easy to modify - but I guess it should be possible to make it so - always happy to discuss options or look at Pull Requests .

9

Looking at the code there is a slight wrinkle in there that could be improved tat could then allow a loading page to be added... Right now it only shows the page if there are no widgets (ie empty dashboard). We could allow it to attempt to load a.n.other page just while loading. I would prefer to have no default loading page as it causes page flashing on load which I personally don't like. But it could look to see if there was one provided by a user and load that if it exists.

10

A splash screen thatā€™s replaced with the content when it finishes loading? Iā€™m not acquainted enough with AngularJS to describe how, but in other frameworks I suggest static content to be placed in the index page outer html, in a div thatā€™s overwritten when the page finishes loading, for example hooking it to an event handler. Depending on how the resources are loaded itā€™s supposedly already possible with vanilla JavaScript but I canā€™t remember where I read that.

As for the flashing, are CSS3 style fade outs an idea, to replace with the content?

11

Hi @newbie,
I'm not at my pc at the moment, so can you give some background information about this. Is it you have a large SVG or is out node that is slow to load? Because in the next version there will be "touch" support, which means an extra library needs to be loaded.
Bart

12

Bart, can you optionally load those libraries by performing a check if their support is needed/wanted, like a way to opt-out maybe (advanced settings in the node config, just shouting in the void, no clue really; maybe like how Julian is hiding the advanced uibuilder settings in a block thatā€™s hidden by default), then the loading/importing wrapped in an if-else block in the template.

13

Maybe something like it's done in Grafana? They use some kind of loading animation. And Grafana is based on Angular as well.

14

That is currently exactly what happens - though the loading page is currently blank.
The "easy" fix is for me to make it try to load a "loading.html" file from the dist/ folder (where index.html is already) - and then let users just put whatever they like there - but it would probably get wiped on any upgrades.

1 Like
15

@BartButenaers, Thanks. The library is not heavy at all. Actually, I am waiting for new version (which supports touch). However, I use the node in several flows and several tabs. I think the reason for it to be heavy is because I upload a high resolution PNG image for each SVG node. Sometime, I upload several PNG images for a given SVG node. So, the library itself is very light. It is my usage, which led to make heavy.

So thanks @BartButenaers again for the good work and no worries about the library size as its size is very light. (I even manually test the the new version :sweat_smile: from github)

1 Like
16

I think no need for that. As I mentioned in my replay, the library its self is very light. It is the user usage may lead to make it heavy

1 Like
17

@dceejay thanks for good work. This is good idea. Also, the easy fix is promising too. I try to check it.

By the way, you are absolutely right regarding the current splash/loading screen when there are no widgets. I am looking exactly to something like (apply to the case of where there are widgets). :slight_smile:

18

Ok - have pushed a version to master for folk to try if they like...

cd ~/.node-red
npm i node-red/node-red-dashboard

if you are feeling lucky.
once installed you will need to add a simple loading.html file to your node_modules/node-red-dashboard/dist/ directory - eg something like

<div><i class="fa fa-spin fa-5x fa-spinner" aria-hidden="true"></i><br/> Loading...</div>
1 Like
19

Hey Lena,
Thanks for the tip!
Currently the code always loads the panzoom library (for the next version), but indeed I could load it only if panning and zoom has been enabled. Have put it on my todo list ...

1 Like
20

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