ダイアログ表示時snipper追加

frontend/src/components/AppSelect.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="q-pa-md">
-    <q-table  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
+  <div class="q-pa-md" >
+    <div v-if="!isLoaded" class="spinner flex flex-center">
+      <q-spinner  color="primary" size="3em" />
+    </div>
+    <q-table v-else :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
       <template v-slot:body-cell-description="props">
           <q-td :props="props">
               <q-scroll-area  class="description-cell">
@@ -11,7 +14,7 @@
     </q-table>
   </div>
 </template>
-<script >
+<script lang="ts">
 import { ref,onMounted,reactive } from 'vue'
 import { api } from 'boot/axios';
 import { LeftDataBus } from './flowEditor/left/DataBus';
@@ -29,24 +32,25 @@ export default {
   { name: 'description', label: '概要', field: 'description',align:'left', sortable: false },
   { name: 'createdate', label: '作成日時', field: 'createdate',align:'left'}
   ]
-  const rows = reactive([])
+    const isLoaded=ref(false);
+    const rows :any[]= reactive([]);
     onMounted( () => {
         api.get('api/v1/allapps').then(res =>{
-          res.data.apps.forEach((item) =>
+          res.data.apps.forEach((item:any) =>
               {
                 rows.push({
                   id:item.appId,
                   name:item.name,
                   description:item.description,
                   createdate:dateFormat(item.createdAt)});
-              }
-            )
-        });
+                });
+                isLoaded.value=true;
+              });
       });
 
-    const dateFormat=(dateStr)=>{
+    const dateFormat=(dateStr:string)=>{
       const date = new Date(dateStr);
-      const pad = (num) => num.toString().padStart(2, '0');
+      const pad = (num:number) => num.toString().padStart(2, '0');
       const year = date.getFullYear();
       const month = pad(date.getMonth() + 1);
       const day = pad(date.getDate());
@@ -58,7 +62,8 @@ export default {
     return {
       columns,
       rows,
-      selected: ref([])
+      selected: ref([]),
+      isLoaded
     }
   },
 
@@ -71,4 +76,8 @@ export default {
   max-height: 60px;
   max-width: 300px;
 }
+.spinner{
+  min-height: 300px;
+  min-width: 400px;
+}
 </style>