Add loading page whilst waiting for pending requests

camptocamp · Oct 17, 2018 · 4549917 · 4549917
1 parent 26a31c4
commit 4549917
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 15 deletions.
diff --git a/contribs/gmf/apps/desktop/index.html.ejs b/contribs/gmf/apps/desktop/index.html.ejs
@@ -10,14 +10,16 @@
     <% } %>
   </head>
   <body ng-class="{'gmf-profile-chart-active': !!profileChartActive}">
-    <header>
-      <div class="logo">
-        <img src="<%=require("./image/logo.png")%>" />
-        <span>by Camptocamp</span>
-      </div>
-    </header>
+  <div ng-show="mainCtrl.loading" class="loading-mask">
+    <i class="fa fa-spinner fa-spin spinner-loading-mask"></i>
+  </div>
+  <header>
+    <div class="logo">
+      <img src="<%=require("./image/logo.png")%>" />
+      <span>by Camptocamp</span>
+    </div>
+  </header>
     <main>
-      <div class="gmf-app-data-panel"
       <div class="gmf-app-data-panel"
            ngeo-resizemap="mainCtrl.map"
            ngeo-resizemap-state="mainCtrl.dataPanelActive"

diff --git a/contribs/gmf/apps/desktop_alt/index.html.ejs b/contribs/gmf/apps/desktop_alt/index.html.ejs
@@ -10,12 +10,15 @@
     <% } %>
   </head>
   <body ng-class="{'gmf-profile-chart-active': !!profileChartActive, 'gmf-query-grid-active': !!queryGridActive}" ng-keydown="mainCtrl.onKeydown($event)">
-    <header>
-      <div class="logo">
-        <img src="<%=require("./image/logo.png")%>" />
-        <span>by Camptocamp</span>
-      </div>
-    </header>
+  <div ng-show="mainCtrl.loading" class="loading-mask">
+    <i class="fa fa-spinner fa-spin spinner-loading-mask"></i>
+  </div>
+  <header>
+    <div class="logo">
+      <img src="<%=require("./image/logo.png")%>" />
+      <span>by Camptocamp</span>
+    </div>
+  </header>
     <main>
       <div class="gmf-app-data-panel"
            ngeo-resizemap="mainCtrl.map"

diff --git a/contribs/gmf/apps/mobile/image/logo.png b/contribs/gmf/apps/mobile/image/logo.png
diff --git a/contribs/gmf/apps/mobile/index.html.ejs b/contribs/gmf/apps/mobile/index.html.ejs
@@ -11,17 +11,24 @@
     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
     <% } %>
   </head>
+
   <body ng-class="{'gmf-mobile-nav-is-visible': mainCtrl.navIsVisible(),
                    'gmf-mobile-nav-left-is-visible': mainCtrl.leftNavIsVisible(),
                    'gmf-mobile-nav-right-is-visible': mainCtrl.rightNavIsVisible()}">
+  <div ng-show="mainCtrl.loading" class="loading-mask">
+    <i class="fa fa-spinner fa-spin spinner-loading-mask"></i>
+    &nbsp;
+    <img src="<%=require("./image/logo.png")%>" />
+  </div>
     <main ng-class="{'gmf-search-is-active': mainCtrl.searchOverlayVisible}">
       <gmf-map
         gmf-map-map="mainCtrl.map"
         gmf-map-manage-resize="mainCtrl.manageResize"
         gmf-map-resize-transition="mainCtrl.resizeTransition"
         ngeo-map-query=""
         ngeo-map-query-map="::mainCtrl.map"
-        ngeo-map-query-active="mainCtrl.queryActive"></gmf-map>
+        ngeo-map-query-active="mainCtrl.queryActive">
+      </gmf-map>
       <gmf-displayquerywindow
         gmf-displayquerywindow-featuresstyle="::mainCtrl.queryFeatureStyle"
         gmf-displayquerywindow-defaultcollapsed="false">

diff --git a/contribs/gmf/apps/mobile_alt/image/logo.png b/contribs/gmf/apps/mobile_alt/image/logo.png
diff --git a/contribs/gmf/apps/mobile_alt/index.html.ejs b/contribs/gmf/apps/mobile_alt/index.html.ejs
@@ -14,6 +14,11 @@
   <body ng-class="{'gmf-mobile-nav-is-visible': mainCtrl.navIsVisible(),
                    'gmf-mobile-nav-left-is-visible': mainCtrl.leftNavIsVisible(),
                    'gmf-mobile-nav-right-is-visible': mainCtrl.rightNavIsVisible()}">
+  <div ng-show="mainCtrl.loading" class="loading-mask">
+    <i class="fa fa-spinner fa-spin spinner-loading-mask"></i>
+    &nbsp;
+    <img src="<%=require("./image/logo.png")%>" />
+  </div>
     <main ng-class="{'gmf-search-is-active': mainCtrl.searchOverlayVisible}">
       <gmf-map
         gmf-map-map="mainCtrl.map"

diff --git a/contribs/gmf/src/controllers/AbstractAppController.js b/contribs/gmf/src/controllers/AbstractAppController.js
@@ -6,7 +6,6 @@ import 'angular';
 import 'angular-gettext';
 import 'angular-dynamic-locale';
 import gmfAuthenticationModule from 'gmf/authentication/module.js';
-
 import gmfBackgroundlayerselectorComponent from 'gmf/backgroundlayerselector/component.js';
 import gmfDatasourceModule from 'gmf/datasource/module.js';
 import gmfDisclaimerComponent from 'gmf/disclaimer/component.js';
@@ -104,6 +103,16 @@ const exports = function(config, $scope, $injector) {
    */
   this.gmfThemes_ = $injector.get('gmfThemes');
 
+  /**
+   * Checks if the themes are loaded
+   * @type {boolean}
+   * @export
+   */
+  this.loading = true;
+  this.gmfThemes_.getThemesObject().finally((themes) => {
+    this.loading = false;
+  });
+
   /**
    * Permalink service
    * @type {gmf.permalink.Permalink}

diff --git a/contribs/gmf/src/controllers/desktop.scss b/contribs/gmf/src/controllers/desktop.scss
@@ -32,6 +32,16 @@ $border-color: darken($brand-primary, $standard-variation) !default;
 
 @import '~gmf/layertree/desktop.scss';
 
+.loading-mask {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height:100%;
+}
+.spinner-loading-mask {
+  color: red;
+  font-size: 125px;
+}
 
 html, body {
   position: relative;

diff --git a/contribs/gmf/src/controllers/mobile.scss b/contribs/gmf/src/controllers/mobile.scss
@@ -27,6 +27,17 @@ $border-color: black !default;
  * Mobile specific css only !
  * Please, use shared less files to describe desktop-mobile shared css
  */
+.spinner-loading-mask {
+  color: red;
+  font-size: 125px;
+}
+
+.loading-mask {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height:100%;
+}
 
 main>* {
   position: absolute;