From 0c83fa706094d8813957710b0c663e5700eeefef Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 7 May 2020 22:34:57 +0100 Subject: [PATCH] Add loading progress bar --- .../editor-client/locales/en-US/editor.json | 7 +++ .../@node-red/editor-client/src/js/red.js | 54 +++++++++++++++++-- .../src/js/ui/projects/projects.js | 2 +- .../editor-client/src/sass/workspace.scss | 41 ++++++++++++++ 4 files changed, 100 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 06712b4de..681185134 100755 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -34,6 +34,13 @@ "null": "null" } }, + "event": { + "loadPalette": "Loading Palette", + "loadNodeCatalogs": "Loading Node catalogs", + "loadNodes": "Loading Nodes __count__", + "loadFlows": "Loading Flows", + "importFlows": "Adding Flows to workspace" + }, "workspace": { "defaultName": "Flow __number__", "editFlow": "Edit flow: __name__", diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 330b2f9a5..06f140a50 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -75,6 +75,7 @@ var RED = (function() { } function loadNodeList() { + loader.reportProgress(RED._("event.loadPalette"), 20) $.ajax({ headers: { "Accept":"application/json" @@ -83,6 +84,7 @@ var RED = (function() { url: 'nodes', success: function(data) { RED.nodes.setNodeList(data); + loader.reportProgress(RED._("event.loadNodeCatalogs"), 25) RED.i18n.loadNodeCatalogs(function() { loadIconList(loadNodes); }); @@ -107,6 +109,7 @@ var RED = (function() { } function loadNodes() { + loader.reportProgress(RED._("event.loadNodes",{count:""}), 30) var lang = localStorage.getItem("editor-language")||i18n.detectLanguage(); $.ajax({ @@ -118,7 +121,11 @@ var RED = (function() { url: 'nodes', success: function(data) { var configs = data.trim().split(/(?=)/); + var totalCount = configs.length; + var stepConfig = function() { + loader.reportProgress(RED._("event.loadNodes",{count:(totalCount-configs.length)+"/"+totalCount}), 30 + ((totalCount-configs.length)/totalCount)*40 ) + if (configs.length === 0) { $("#red-ui-editor").i18n(); $("#red-ui-palette > .red-ui-palette-spinner").hide(); @@ -159,6 +166,7 @@ var RED = (function() { } function loadFlows(done) { + loader.reportProgress(RED._("event.loadFlows"),80 ) $.ajax({ headers: { "Accept":"application/json", @@ -169,6 +177,7 @@ var RED = (function() { if (nodes) { var currentHash = window.location.hash; RED.nodes.version(nodes.rev); + loader.reportProgress(RED._("event.importFlows"),90 ) RED.nodes.import(nodes.flows); RED.nodes.dirty(false); RED.view.redraw(true); @@ -195,6 +204,7 @@ var RED = (function() { return; } if (notificationId === "project-update") { + loader.start("Loading project",0) RED.nodes.clear(); RED.history.clear(); RED.view.redraw(true); @@ -210,6 +220,7 @@ var RED = (function() { "revert": RED._("notification.project.revert", {project: msg.project}), "merge-complete": RED._("notification.project.merge-complete") }[msg.action]; + loader.end() RED.notify("

"+message+"

"); RED.sidebar.info.refresh() }); @@ -425,6 +436,12 @@ var RED = (function() { var id = topic.substring(9); RED.eventLog.log(id,payload); }); + + $(".red-ui-header-toolbar").show(); + + setTimeout(function() { + loader.end(); + },100); } function showAbout() { @@ -506,7 +523,6 @@ var RED = (function() { } function loadEditor() { - RED.workspaces.init(); RED.statusBar.init(); RED.view.init(); @@ -549,13 +565,14 @@ var RED = (function() { RED.comms.connect(); $("#red-ui-main-container").show(); - $(".red-ui-header-toolbar").show(); + RED.actions.add("core:show-about", showAbout); loadNodeList(); } + function buildEditor(options) { var header = $('
').appendTo(options.target); var logo = $('').appendTo(header); @@ -570,6 +587,10 @@ var RED = (function() { '').appendTo(options.target); $('
').appendTo(options.target); $('
').appendTo(options.target); + + loader.init().appendTo("#red-ui-main-container"); + loader.start("...",0); + $.getJSON(options.apiRootUrl+"theme", function(theme) { if (theme.header) { if (theme.header.url) { @@ -602,12 +623,39 @@ var RED = (function() { options.target.addClass("red-ui-editor"); buildEditor(options); + RED.i18n.init(options, function() { RED.settings.init(options, loadEditor); }) } + var loader = { + init: function() { + var wrapper = $('
').hide(); + var container = $('
').appendTo(wrapper); + var label = $('
',{class:"red-ui-loading-bar-label"}).appendTo(container); + var bar = $('
',{class:"red-ui-loading-bar"}).appendTo(container); + var fill =$('').appendTo(bar); + return wrapper; + }, + start: function(text, prcnt) { + if (text) { + loader.reportProgress(text,prcnt) + } + $("#red-ui-loading-progress").show(); + }, + reportProgress: function(text, prcnt) { + $(".red-ui-loading-bar-label").text(text); + $(".red-ui-loading-bar span").width(prcnt+"%") + }, + end: function() { + $("#red-ui-loading-progress").hide(); + loader.reportProgress("",0); + } + } + return { - init: init + init: init, + loader: loader } })(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js index 024a569e5..5b93fd2db 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js @@ -1497,7 +1497,6 @@ RED.projects = (function() { } } else if (projectType === 'open') { return switchProject(selectedProject.name,function(err,data) { - dialog.dialog( "close" ); if (err) { if (err.code !== 'credentials_load_failed') { console.log(RED._("projects.create.unexpected_error"),err) @@ -1606,6 +1605,7 @@ RED.projects = (function() { }, } },{active:true}).then(function() { + dialog.dialog( "close" ); RED.events.emit("project:change", {name:name}); }).always(function() { setTimeout(function() { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index 2162cad8a..2adfb89ba 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -172,3 +172,44 @@ button.red-ui-footer-button-toggle { margin-right: 0; } } + + +#red-ui-loading-progress { + position: absolute; + background: $primary-background; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 200; + & > div { + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); + width: 300px; + height:80px; + text-align: center; + color: $secondary-text-color; + + } +} +.red-ui-loading-bar { + box-sizing: border-box; + width: 300px; + height: 30px; + border: 2px solid $primary-border-color; + border-radius: 4px; + + > span { + display: block; + height: 100%; + background: $secondary-border-color; + transition: width 0.2s; + width: 10%; + } +} +.red-ui-loading-bar-label { + font-size: 13px; + margin-bottom: 2px; +}