ダイアログ表示時snipper追加

frontend/src/components/FieldSelect.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="q-pa-md">
-    <q-table   row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <div v-if="!isLoaded" class="spinner flex flex-center">
+      <q-spinner  color="primary" size="3em" />
+    </div>
+    <q-table v-else  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
   </div>
 </template>
 <script>
@@ -15,32 +18,34 @@ export default {
     appId:Number
   },
   setup(props) {
-  const columns = [
-  { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
-  { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
-  { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
-  ]
-  const rows = reactive([])
-    onMounted( () => {
-        api.get('api/v1/appfields', {
-              params:{
-                app: props.appId
-              }
-          }).then(res =>{
-         let fields = res.data.properties;
-         console.log(fields);
-         Object.keys(fields).forEach((key) =>
-        {
-          rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
-        }
-        )
-      });
-      });
-    return {
-      columns,
-      rows,
-      selected: ref([]),
-    }
+    const isLoaded=ref(false);
+    const columns = [
+    { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
+    { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
+    { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
+    ]
+    const rows = reactive([])
+      onMounted( () => {
+          api.get('api/v1/appfields', {
+                params:{
+                  app: props.appId
+                }
+            }).then(res =>{
+              let fields = res.data.properties;
+              console.log(fields);
+              Object.keys(fields).forEach((key) =>
+              {
+                rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
+              });
+              isLoaded.value=true;
+        });
+        });
+      return {
+        columns,
+        rows,
+        selected: ref([]),
+        isLoaded
+      }
   },
 
 }