feat: add preloading screen

Author: jleveugle

packages/manager/apps/public-cloud/src/components/manager-preload/index.js

@@ -0,0 +1,21 @@
+import angular from 'angular';
+import translate from 'angular-translate';
+import uiRouter from '@uirouter/angularjs';
+
+import './manager-preload.less';
+
+const moduleName = 'publicCloudManagerPreload';
+
+angular
+  .module(moduleName, [
+    translate,
+    uiRouter,
+  ])
+  .run(/* @ngTranslationsInject:json ./translations */)
+  .run(($rootScope, $transitions) => {
+    $transitions.onSuccess({}, () => {
+      $rootScope.managerPreloadHide = ' manager-preload-hide'; // eslint-disable-line no-param-reassign
+    });
+  });
+
+export default moduleName;

packages/manager/apps/public-cloud/src/components/manager-preload/manager-preload.less

@@ -0,0 +1,23 @@
+@import '../../assets/theme/_variables.less';
+
+#managerPreload {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  z-index: 9999;
+
+  hr {
+    border-top: 2px solid @primary-color;
+    width: 30%;
+    margin: auto;
+  }
+
+  &.manager-preload-hide {
+    transition: opacity 800ms 1s, visibility 1800ms;
+    opacity: 0;
+    visibility: hidden !important;
+  }
+}

packages/manager/apps/public-cloud/src/components/manager-preload/translations/Messages_fr_FR.json

@@ -0,0 +1,4 @@
+{
+  "preload_welcome": "Bienvenue sur votre",
+  "preload_manager_ovh": "Espace client OVH"
+}

packages/manager/apps/public-cloud/src/index.html

@@ -17,19 +17,23 @@
                             <cloud-sidebar></cloud-sidebar>
                         </div>
                         <div class="h-100 position-relative" data-ng-class="{ 'col-md-10 p-0': $ctrl.shouldDisplaySidebar, 'col-md-12': !$ctrl.shouldDisplaySidebar }">
-                            <div data-ui-view class="position-absolute w-100 h-100" style="overflow: auto;">
-                                <div class="h-100 w-100 d-flex">
-                                    <div class="m-auto text-center">
-                                        <span class="oui-icon oui-icon-clock-wait mb-4" style="font-size: 5rem;"></span>
-                                        <h1 class="font-weight-bold" data-translate="public_cloud_coming_soon"></h1>
-                                        <p data-translate="public_cloud_coming_soon_description"></p>
-                                    </div>
-                                </div>
-                            </div>
+                            <div data-ui-view class="position-absolute w-100 h-100" style="overflow: auto;"></div>
                         </div>
                     </div>
                 </div>
             </div>
+            <div id="managerPreload"
+                class="d-flex text-center"
+                data-ng-class="managerPreloadHide">
+                <div class="m-auto">
+                    <p class="lead mb-3" data-translate="preload_welcome"></p>
+                    <hr class="my-0" />
+                    <h1 class="mt-3 mb-5" data-translate="preload_manager_ovh"></h1>
+                    <div class="mt-5">
+                        <oui-spinner data-size="l"></oui-spinner>
+                    </div>
+                </div>
+            </div>
         </div>
     </body>
 </html>

packages/manager/apps/public-cloud/src/index.js

@@ -20,6 +20,7 @@ import ngOvhApiWrappers from '@ovh-ux/ng-ovh-api-wrappers';
 import 'ovh-ui-kit/dist/oui.css';
 import 'ovh-ui-kit-bs/dist/ovh-ui-kit-bs.css';
 
+import preload from './components/manager-preload';
 import navbar from './navbar';
 import sidebar from './sidebar';
 
@@ -36,6 +37,7 @@ angular
     ovhManagerPci,
     navbar,
     ngOvhApiWrappers,
+    preload,
     sidebar,
   ])
   .controller('PublicCloudController', controller)