disable buttons while loading

src/components/TheModels.vue

@@ -8,6 +8,9 @@ import VDialog from './VDialog.vue'
 
 const store = useStore()
 const newDialogOpen = ref(false);
+const newDialogDisabled = ref(false);
+
+
 const projectType = ref("ua");
 
 async function exportProject() {
@@ -26,6 +29,7 @@ function downloadBlob(blob: Blob, filename: string) {
 }
 
 async function newProject() {
+  newDialogDisabled.value=true;
   store.addressSpace = new AddressSpace([] as UANodeSet[])
   let nodesets:string[]=[];
   switch(projectType.value) {
@@ -44,6 +48,8 @@ async function newProject() {
   let as= await AddressSpace.load(nodesets.reverse());
   store.setAddressSpace(as);
   newDialogOpen.value=false;
+  newDialogDisabled.value=false;
+
 }
 </script>
 
@@ -66,7 +72,7 @@ async function newProject() {
     <button class="btn btn-light" @click="newDialogOpen = true">New project</button>
   </div>
 
-  <v-dialog :open="newDialogOpen" @cancel="newDialogOpen=false">
+  <v-dialog :open="newDialogOpen" @cancel="newDialogOpen=false" >
     <p>New project</p>
     <div class="form-check">
       <input class="form-check-input" type="radio" name="projectType" id="empty" value="empty" v-model="projectType">
@@ -84,8 +90,8 @@ async function newProject() {
       <input class="form-check-input" type="radio" name="projectType" id="emco" value="emco" v-model="projectType">
       <label class="form-check-label" for="emco">Full EMCO Project</label>
     </div>
-    <button @click="newProject()">OK</button>
-    <button @click="newDialogOpen = false">Cancel</button>
+    <button @click="newProject()" :disabled="newDialogDisabled">OK</button>
+    <button @click="newDialogOpen = false" :disabled="newDialogDisabled">Cancel</button>
   </v-dialog>
 </template>