Join page new design implemented

src/App.vue

@@ -7,27 +7,24 @@
       <v-container
         fluid
         fill-height
-        style="
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          z-index: 20;
-          background-color: rgba(255, 255, 255, 1);
-        "
         v-if="loading"
+        class="loading-container"
       >
         <v-row align="center" justify="center">
           <v-col class="text-center">
             <v-progress-circular
               indeterminate
-              color="primary"
+              class="loading-convene"
             ></v-progress-circular>
             <div>{{ $t("menu.loading", { appName: appName }) }}</div>
           </v-col>
         </v-row>
       </v-container>
+
+      <v-skeleton-loader
+        type="list-item-avatar-two-line, divider, list-item-three-line, card-heading"
+        v-if="loading"
+      ></v-skeleton-loader>
     </v-main>
   </v-app>
 </template>
@@ -190,4 +187,22 @@ export default {
     width: $main-desktop-width;
   }
 }
+.v-skeleton-loader--is-loading {
+  z-index: 100;
+}
+.loading {
+  &-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20;
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  &-convene {
+    color: $very-very-purple;
+  }
+}
 </style>