feat(loading): loading animation

infra-geo-ouverte · Jul 30, 2019 · d7fe26d · d7fe26d
1 parent ad01f05
commit d7fe26d
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 10 deletions.
diff --git a/proxy.conf.json b/proxy.conf.json
@@ -9,6 +9,11 @@
     "secure": false,
     "changeOrigin": true
   },
+  "/carto/": {
+    "target": "https://geoegl.msp.gouv.qc.ca",
+    "secure": false,
+    "changeOrigin": true
+  },
   "/apis/": {
     "target": "https://geoegl.msp.gouv.qc.ca",
     "secure": false,

diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
@@ -39,7 +39,7 @@
     igoDropGeoFile
     (query)="onMapQuery($event)"
     [map]="map"
-    [igoContextMenu]=actionbarMenu
+    [igoContextMenu]=contextMenu
     (menuPosition)="onContextMenuOpen($event)"
     [ngClass]="{'igo-attribution-offset': map.getBaseLayers().length > 1}"
     [@mapStateX]="sidenavOpened ? 'right' : 'left'"
@@ -99,7 +99,7 @@
   (resultSelect)="addFeatureToMap($event)">
 </app-toast-panel>
 
-<ng-template #actionbarMenu>
+<ng-template #contextMenu>
   <igo-actionbar
     [store]="contextMenuStore"
     [withIcon]="false"

diff --git a/src/app/pages/portal/sidenav/sidenav.module.ts b/src/app/pages/portal/sidenav/sidenav.module.ts
@@ -12,7 +12,6 @@ import { IgoPanelModule, IgoFlexibleModule, IgoToolModule } from '@igo2/common';
 import { IgoFeatureModule } from '@igo2/geo';
 import { IgoContextManagerModule } from '@igo2/context';
 
-import { ToolboxModule } from '../toolbox/toolbox.module';
 import { SidenavComponent } from './sidenav.component';
 
 @NgModule({
@@ -27,8 +26,7 @@ import { SidenavComponent } from './sidenav.component';
     IgoFlexibleModule,
     IgoContextManagerModule,
     IgoToolModule,
-    IgoFeatureModule,
-    ToolboxModule
+    IgoFeatureModule
   ],
   exports: [SidenavComponent],
   declarations: [SidenavComponent]

diff --git a/src/index.html b/src/index.html
@@ -7,8 +7,71 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root>Loading...</app-root>
-</body>
-</html>
+
+  <!-- inline spinner styles to be able to display spinner right away -->
+    <style type="text/css">
+      body, html {
+        height: 100%;
+      }
+      .app-loading {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        font-family: Arial, Helvetica, sans-serif;
+        color: #bbb;
+      }
+      .app-loading .spinner {
+        height: 200px;
+        width: 200px;
+        animation: rotate 2s linear infinite;
+        transform-origin: center center;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+      .app-loading .spinner .path {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+        animation: dash 1.5s ease-in-out infinite;
+        stroke-linecap: round;
+        stroke: #ddd;
+      }
+      @keyframes rotate {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      @keyframes dash {
+        0% {
+          stroke-dasharray: 1, 200;
+          stroke-dashoffset: 0;
+        }
+        50% {
+          stroke-dasharray: 89, 200;
+          stroke-dashoffset: -35px;
+        }
+        100% {
+          stroke-dasharray: 89, 200;
+          stroke-dashoffset: -124px;
+        }
+      }
+    </style>
+
+  </head>
+  <body>
+    <app-root>
+      <div class="app-loading">
+        Loading...
+        <svg class="spinner" viewBox="25 25 50 50">
+          <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
+        </svg>
+      </div>
+    </app-root>
+  </body>
+  </html>