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 = $('