処理中表示追加

frontend/src/pages/FlowChart.vue

@@ -24,9 +24,9 @@
             </div>
 
             <div class="flex-center fixed-bottom bg-grey-3 q-pa-md row ">
-              <q-btn color="secondary" glossy label="デプロイ"  @click="onDeploy" icon="sync"/>
+              <q-btn color="secondary" glossy label="デプロイ"  @click="onDeploy" icon="sync" :loading="deployLoading" />
               <q-space></q-space>
-              <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" />
+              <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" :loading="saveLoading"/>
             </div>
         </q-drawer>
       </div>
@@ -44,9 +44,9 @@
       </div>
       <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
     </q-layout>
-  <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" width="350px">
-      <action-select ref="appDg" name="model" type="single"></action-select>
-  </ShowDialog>
+    <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" width="350px">
+        <action-select ref="appDg" name="model" type="single"></action-select>
+    </ShowDialog>
 
   </q-page>
 
@@ -65,6 +65,9 @@ import AppSelector from 'components/left/AppSelector.vue';
 import EventTree from 'components/left/EventTree.vue';
 import {FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
+const deployLoading = ref(false);
+const saveLoading = ref(false);
+
 const drawerLeft = ref(false);
 const $q=useQuasar();
 const store = useFlowEditorStore();
@@ -138,13 +141,17 @@ const onDeploy= async ()=>{
     return;
   }
   try{
+    deployLoading.value=true;
     await store.deploy();
+    deployLoading.value=false;
     $q.notify({
       type: 'positive',
       caption:"通知",
       message: `デプロイを成功しました。`
     });
   }catch(error){
+    console.error(error);
+    deployLoading.value=false;
     $q.notify({
       type: 'negative',
       caption:"エラー",
@@ -165,13 +172,17 @@ const onSaveFlow = async ()=>{
     return;
   }
   try{
+    saveLoading.value=true;
     await store.saveFlow(targetFlow);
+    saveLoading.value=false;
     $q.notify({
       type: 'positive',
       caption:"通知",
       message: `${targetFlow.getRoot()?.subTitle}のフロー設定を保存しました。`
     });
   }catch(error){
+    console.error(error);
+    saveLoading.value=false;
     $q.notify({
       type: 'negative',
       caption:"エラー",