ConfigView loading flow

ui/src/components/ConfigView.vue

@@ -1,5 +1,10 @@
 <template>
-  <BulmaDrawer header="Konfiguration">
+  <BulmaDrawer
+    header="Konfiguration"
+    :ready="config_loaded"
+    @open="on_open"
+    @close="on_close"
+  >
     <div class="card-content">
       <div class="columns">
         <div class="column is-one-third">
@@ -173,6 +178,7 @@ interface ConfigModel {
   },
 })
 export default class extends Vue {
+  public config_loaded = false;
   public admin_config_model: ConfigModel = {
     puzzle: {
       solution: "ABCDEFGHIJKLMNOPQRSTUVWX",
@@ -198,12 +204,19 @@ export default class extends Vue {
     },
   };
 
-  public mounted(): void {
+  public on_open(): void {
     this.$advent22
       .api_get<ConfigModel>("admin/config_model")
-      .then((data) => (this.admin_config_model = data))
+      .then((data) => {
+        this.admin_config_model = data;
+        this.config_loaded = true;
+      })
       .catch(console.log);
   }
+
+  public on_close(): void {
+    this.config_loaded = false;
+  }
 }
 </script>
 

ui/src/components/bulma/Drawer.vue

@@ -2,7 +2,7 @@
   <div class="card">
     <header
       class="card-header has-background-grey-lighter is-unselectable"
-      @click="is_open = !is_open"
+      @click="toggle"
     >
       <p class="card-header-title">{{ header }}</p>
       <button class="card-header-icon">
@@ -14,7 +14,12 @@
       </button>
     </header>
 
-    <slot v-if="is_open" name="default" />
+    <template v-if="is_open">
+      <slot v-if="ready" name="default" />
+      <div v-else class="card-content">
+        <progress class="progress is-primary" max="100" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -28,11 +33,20 @@ import { Options, Vue } from "vue-class-component";
       required: false,
       default: "",
     },
+    ready: Boolean,
   },
+  emits: ["open", "close"],
 })
 export default class extends Vue {
-  public is_open = false;
   public header!: string;
+  public ready!: boolean;
+
+  public is_open = false;
+
+  public toggle() {
+    this.is_open = !this.is_open;
+    this.$emit(this.is_open ? "open" : "close");
+  }
 }
 </script>