initial page preloader

diff --git a/services/self-service/src/main/resources/webapp/src/app/app.module.ts b/services/self-service/src/main/resources/webapp/src/app/app.module.ts
index a010587..3b3b445 100644
--- a/services/self-service/src/main/resources/webapp/src/app/app.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/app.module.ts

@@ -68,8 +68,7 @@
     provide: LocationStrategy,
     useClass: HashLocationStrategy,
     useValue: '/'
-  }
-  ],
+  }],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss
index c4783e1..dfaccb2 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/app-loading.scss

@@ -17,6 +17,65 @@
  * under the License.
  */
 
+body,
+html {
+  height: 100%;
+}
+
+.app-loading {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.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: 20, 200;
+  stroke-dashoffset: 0;
+  animation: dash 1.5s ease-in-out infinite;
+  stroke-linecap: round;
+  stroke: #35afd5;
+}
+
+@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;
+  }
+}
+
+
 .app-loading {
   .logo {
     width: 100px;

diff --git a/services/self-service/src/main/resources/webapp/src/dictionary/global.dictionary.ts b/services/self-service/src/main/resources/webapp/src/dictionary/global.dictionary.ts
index 437016f..6d0d8ea 100644
--- a/services/self-service/src/main/resources/webapp/src/dictionary/global.dictionary.ts
+++ b/services/self-service/src/main/resources/webapp/src/dictionary/global.dictionary.ts

@@ -19,8 +19,8 @@
 
 // from './{{ aws | gcp | azure }}.dictionary';
 
-import { NAMING_CONVENTION } from './aws.dictionary';
+import { NAMING_CONVENTION } from './CLOUD_PROVIDER.dictionary';
 
-export * from './aws.dictionary';
+export * from './CLOUD_PROVIDER.dictionary';
 
 export const DICTIONARY = Object.freeze(NAMING_CONVENTION);

diff --git a/services/self-service/src/main/resources/webapp/src/index.html b/services/self-service/src/main/resources/webapp/src/index.html
index facd7a1..849c5f1 100644
--- a/services/self-service/src/main/resources/webapp/src/index.html
+++ b/services/self-service/src/main/resources/webapp/src/index.html

@@ -94,7 +94,7 @@
 
 <body>
   <app-root>
-    <!-- <div class="app-loading">
+    <div class="app-loading">
       <div class="logo">
         <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 140.5 47.1" width="100px" height="100px"
           style="enable-background:new 0 0 140.5 47.1;" xml:space="preserve">
@@ -105,8 +105,7 @@
       <svg class="spinner" viewBox="25 25 50 50">
         <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="1" stroke-miterlimit="10" />
       </svg>
-    </div> -->
-    Loading...
+    </div>
   </app-root>
 </body>