Ajout de loading sur le chargement

de l'application + lors du chargement
des composants

Front/skydivelogs-app/src/assets/css/custom-theme.scss

@@ -0,0 +1,10 @@
+@import '~@angular/material/theming';
+
+@include mat-core();
+
+$custom-theme-primary: mat-palette($mat-grey, 900);
+$custom-theme-accent:mat-palette($mat-pink, A200, A100, A400);
+$custom-theme-warn: mat-palette($mat-red);
+$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
+
+@include angular-material-theme($custom-theme);

Front/skydivelogs-app/src/assets/css/styles-app-loading.scss

@@ -0,0 +1,62 @@
+.app-loading {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.app-loading {
+  .logo {
+    width: 100px;
+    height: 100px;
+
+    // this way asset gets processed by webpack 
+    background: url(assets/img/logo.png) center center no-repeat;
+  }
+}
+
+.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;
+  }
+}

Front/skydivelogs-app/src/assets/css/styles.css

@@ -0,0 +1,9 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  /* margin: 0; */
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}