🎨 [Frontend] UX Enh: Starting osparc

services/static-webserver/client/source/class/osparc/dashboard/AppBrowser.js

@@ -42,6 +42,7 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
       }
       this._resourcesInitialized = true;
 
+      this._showLoadingPage(this.tr("Loading Apps..."));
       this._resourcesList = [];
       Promise.all([
         osparc.store.Services.getServicesLatest(),
@@ -63,19 +64,21 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
 
           this.getChildControl("resources-layout");
           this.reloadResources();
-          this._hideLoadingPage();
         });
     },
 
     reloadResources: function(useCache = true) {
-      this.__loadServices();
-      this.__loadHypertools(useCache);
+      Promise.all([
+        this.__loadServices(),
+        this.__loadHypertools(useCache),
+      ])
+        .finally(() => this._hideLoadingPage());
     },
 
     __loadServices: function() {
       const excludeFrontend = true;
       const excludeDeprecated = true
-      osparc.store.Services.getServicesLatestList(excludeFrontend, excludeDeprecated)
+      return osparc.store.Services.getServicesLatestList(excludeFrontend, excludeDeprecated)
         .then(servicesList => {
           servicesList.forEach(service => service["resourceType"] = "service");
           this._resourcesList.push(...servicesList.filter(service => service !== null));
@@ -84,7 +87,7 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
     },
 
     __loadHypertools: function(useCache = true) {
-      osparc.store.Templates.getHypertools(useCache)
+      return osparc.store.Templates.getHypertools(useCache)
         .then(hypertoolsList => {
           hypertoolsList.forEach(hypertool => hypertool["resourceType"] = "hypertool");
           this._resourcesList.push(...hypertoolsList.filter(hypertool => hypertool !== null));
@@ -126,6 +129,8 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
         this._populateCardMenu(card);
       });
       osparc.filter.UIFilterController.dispatch("searchBarFilter");
+
+      this._resourcesContainer.evaluateNoResourcesFoundLabel(cards, this._resourceType);
     },
 
     __itemClicked: function(card) {

services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js

@@ -209,7 +209,7 @@ qx.Class.define("osparc.dashboard.Dashboard", {
             selectedTab.resourceBrowser.initResources();
           } else {
             const initTab = () => {
-              selectedTab.resourceBrowser.initResources()
+              selectedTab.resourceBrowser.initResources();
               this.removeListener("preResourcesLoaded", initTab);
             };
             this.addListener("preResourcesLoaded", initTab, this);

services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js

@@ -42,6 +42,13 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       this._add(foldersContainer);
     }
 
+    const noResourcesFound = this.__noResourcesFound = new qx.ui.basic.Label("No resources found").set({
+      visibility: "excluded",
+      font: "text-14"
+    });
+    noResourcesFound.exclude();
+    this._add(noResourcesFound);
+
     const nonGroupedContainer = this.__nonGroupedContainer = this.__createFlatList();
     this._add(nonGroupedContainer);
 
@@ -128,9 +135,38 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     __groupedContainersList: null,
     __foldersContainer: null,
     __workspacesContainer: null,
+    __noResourcesFound: null,
     __nonGroupedContainer: null,
     __groupedContainers: null,
 
+    evaluateNoResourcesFoundLabel: function(cards, context) {
+      if (this.__noResourcesFound) {
+        let text = null;
+        switch (context) {
+          case "studiesAndFolders":
+          case "search":
+            text = this.tr("No Projects found");
+            break;
+          case "templates":
+            text = this.tr("No Templates found");
+            break;
+          case "public":
+            text = this.tr("No Public Projects found");
+            break;
+          case "template":
+            text = this.tr("No Tutorials found");
+            break;
+          case "service":
+            text = this.tr("No Apps found");
+            break;
+        }
+        this.__noResourcesFound.set({
+          value: text,
+          visibility: text && cards.length === 0 ? "visible" : "excluded",
+        });
+      }
+    },
+
     addNonResourceCard: function(card) {
       if (osparc.dashboard.CardContainer.isValidCard(card)) {
         let groupContainer = null;

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -95,7 +95,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __foldersList: null,
     __loadingFolders: null,
     __loadingWorkspaces: null,
-    __dragWidget: null,
 
     // overridden
     initResources: function() {
@@ -104,6 +103,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       }
       this._resourcesInitialized = true;
 
+      this._showLoadingPage(this.tr("Loading Projects..."));
       this._resourcesList = [];
       this.__getActiveStudy()
         .then(() => {
@@ -118,8 +118,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           } else {
             this.reloadResources();
           }
-          // "Starting..." page
-          this._hideLoadingPage();
 
           // since all the resources (templates, users, orgs...) were already loaded, notifications can be built
           osparc.data.Resources.get("notifications")
@@ -150,10 +148,14 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         osparc.data.Permissions.getInstance().canDo("studies.user.read") &&
         osparc.auth.Manager.getInstance().isLoggedIn()
       ) {
-        this.__reloadFolders();
-        this.__reloadStudies();
+        Promise.all([
+          this.__reloadFolders(),
+          this.__reloadStudies(),
+        ])
+          .finally(() => this._hideLoadingPage());
       } else {
         this.__resetStudiesList();
+        this._hideLoadingPage();
       }
     },
 
@@ -235,7 +237,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
       this.__loadingFolders = true;
       this.__setFoldersToList([]);
-      request
+      return request
         .then(folders => {
           this.__setFoldersToList(folders);
           if (this.getCurrentContext() === "trash") {
@@ -267,7 +269,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
       this._loadingResourcesBtn.setFetching(true);
       this._loadingResourcesBtn.setVisibility("visible");
-      this.__getNextStudiesRequest()
+      this._resourcesContainer.evaluateNoResourcesFoundLabel([]);
+      return this.__getNextStudiesRequest()
         .then(resp => {
           // Context might have been changed while waiting for the response.
           // The new call is on the way, therefore this response can be ignored.
@@ -341,7 +344,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           if (this._resourcesContainer.getFlatList()) {
             this._loadingResourcesBtn.setVisibility(this._resourcesContainer.getFlatList().nextRequest === null ? "excluded" : "visible");
           }
-          this._moreResourcesRequired();
+          // delay the next request to avoid flooding the server
+          setTimeout(() => this._moreResourcesRequired(), 100);
         });
     },
 
@@ -415,6 +419,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this._resourcesContainer.addNonResourceCard(loadMoreBtn);
 
       osparc.filter.UIFilterController.dispatch("searchBarFilter");
+
+      this._resourcesContainer.evaluateNoResourcesFoundLabel(cards, this.getCurrentContext());
     },
 
     __reloadNewCards: function() {
@@ -423,6 +429,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this.__configureStudyCards(cards);
 
       osparc.filter.UIFilterController.dispatch("searchBarFilter");
+
+      this._resourcesContainer.evaluateNoResourcesFoundLabel(cards, this.getCurrentContext());
     },
 
     // WORKSPACES

services/static-webserver/client/source/class/osparc/dashboard/TutorialBrowser.js

@@ -34,21 +34,23 @@ qx.Class.define("osparc.dashboard.TutorialBrowser", {
       }
       this._resourcesInitialized = true;
 
+      this._showLoadingPage(this.tr("Loading Tutorials..."));
       osparc.store.Templates.getTutorials()
         .then(() => {
           this._resourcesList = [];
           this.getChildControl("resources-layout");
           this.reloadResources();
           this.__attachEventHandlers();
-          this._hideLoadingPage();
         });
     },
 
     reloadResources: function(useCache = true) {
       if (osparc.data.Permissions.getInstance().canDo("studies.templates.read")) {
-        this.__reloadTutorials(useCache);
+        this.__reloadTutorials(useCache)
+          .finally(() => this._hideLoadingPage());
       } else {
         this.__setResourcesToList([]);
+        this._hideLoadingPage();
       }
     },
 
@@ -65,8 +67,6 @@ qx.Class.define("osparc.dashboard.TutorialBrowser", {
     },
 
     __tutorialStateReceived: function(templateId, state, errors) {
-      osparc.store.Templates.getTutorials()
-      // OM follow here
       const idx = this._resourcesList.findIndex(study => study["uuid"] === templateId);
       if (idx > -1) {
         this._resourcesList[idx]["state"] = state;
@@ -83,9 +83,9 @@ qx.Class.define("osparc.dashboard.TutorialBrowser", {
     __reloadTutorials: function(useCache) {
       this.__tasksToCards();
 
-        osparc.store.Templates.getTutorials(useCache)
-          .then(tutorials => this.__setResourcesToList(tutorials))
-          .catch(() => this.__setResourcesToList([]));
+      return osparc.store.Templates.getTutorials(useCache)
+        .then(tutorials => this.__setResourcesToList(tutorials))
+        .catch(() => this.__setResourcesToList([]));
     },
 
     _updateTutorialData: function(templateData) {
@@ -116,6 +116,8 @@ qx.Class.define("osparc.dashboard.TutorialBrowser", {
       });
       this.__evaluateUpdateAllButton();
       osparc.filter.UIFilterController.dispatch("searchBarFilter");
+
+      this._resourcesContainer.evaluateNoResourcesFoundLabel(cards, this._resourceType);
     },
 
     __itemClicked: function(card) {