ダイアログ表示時snipper追加

frontend/src/components/ActionSelect.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"
     class="action-table"
     flat bordered
     virtual-scroll
@@ -20,20 +23,20 @@ export default {
     type: String
   },
   setup() {
-  const columns = [
-  { name: 'name', required: true,label: 'アクション名',align: 'left',field: 'name',sortable: true},
-  { name: 'desc', align: 'left', label: '説明', field: 'desc', sortable: true },
-  // { name: 'content', label: '内容', field: 'content', sortable: true }
-  ]
-  const rows = reactive([])
+    const isLoaded=ref(false);
+    const columns = [
+    { name: 'name', required: true,label: 'アクション名',align: 'left',field: 'name',sortable: true},
+    { name: 'desc', align: 'left', label: '説明', field: 'desc', sortable: true },
+    // { name: 'content', label: '内容', field: 'content', sortable: true }
+    ];
+    const rows = reactive([])
     onMounted(async () => {
-        await api.get('api/kintone/1').then(res =>{
-         res.data.forEach((item) =>
+        const res =await api.get('api/kintone/1');
+        res.data.forEach((item) =>
         {
           rows.push({name:item.name,desc:item.desc,content:item.content});
-        }
-        )
-      });
+        });
+        isLoaded.value=true;
       });
     return {
       columns,
@@ -41,7 +44,8 @@ export default {
       selected: ref([]),
       pagination:ref({
         rowsPerPage:0
-      })
+      }),
+      isLoaded,
     }
   },