Display loading page & check for shared secret in session on initial load

aleksis/apps/maka/frontend/components/SharedSecret.vue

 <template>
   <div>
     <slot v-if="sharedSecretStatus" />
+    <div class="d-flex justify-center align-center flex-column text-center" v-else-if="$apollo.queries.sharedSecretStatus.loading">
+      <h1 class="text-h5">{{ $t("maka.shared_secret.checking") }}</h1>
+      <v-progress-circular
+        indeterminate
+        color="primary"
+      ></v-progress-circular>
+    </div>
     <div class="d-flex justify-center align-center flex-column text-center" v-else>
       <h1 class="text-h5">{{ $t("maka.shared_secret.enter") }}</h1>
       <v-text-field v-model="sharedSecret" :loading="loading" type="password" :error-messages="errorMessages">
@@ -31,6 +38,7 @@
         sharedSecretStatus: false,
         loading: false,
         showError: false,
+        initial: true,
       };
     },
     methods: {
@@ -44,7 +52,6 @@
           },
         }).then((data) => {
           this.loading = false;
-          this.$apollo.queries.sharedSecretStatus.skip = false;
           this.$apollo.queries.sharedSecretStatus.refetch();
         });
       },
@@ -61,10 +68,11 @@
     apollo: {
       sharedSecretStatus: {
         query: gqlSharedSecretStatus,
-        skip: true,
         result ({ data, loading, networkStatus }) {
-          if (!loading && !data?.sharedSecretStatus) {
+          if (!loading && !data?.sharedSecretStatus && !this.initial) {
             this.showError = true;
+          } else if (!loading) {
+            this.initial = false;
           }
         },
       },