Show progress circle while auto mode is loading

Author: TaiSakuma

src/components/schedule/auto-mode/auto-mode-button/modes/queue/Button.vue

@@ -1,7 +1,9 @@
 <template>
   <Component :is="menuComponent">
     <template #activator="{ props }">
-      <VBtn v-bind="props" variant="tonal" color="tertiary"> Auto Mode: Queue </VBtn>
+      <VBtn v-bind="props" :loading="pulling" variant="tonal" color="tertiary">
+        Auto Mode: Queue
+      </VBtn>
     </template>
     <div>
       <Dialog class="dialog"></Dialog>
@@ -15,9 +17,13 @@ import { useDisplay } from "vuetify";
 import { VBottomSheet } from "vuetify/components/VBottomSheet";
 import { VMenu } from "vuetify/components/VMenu";
 
+import { usePulling } from "../../usePulling";
 import Dialog from "./Dialog.vue";
+
 const { mobile } = useDisplay();
 const menuComponent = computed(() => (mobile.value ? VBottomSheet : VMenu));
+
+const { pulling } = await usePulling();
 </script>
 
 <style scoped>

src/components/schedule/auto-mode/auto-mode-button/modes/scheduler/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <Component :is="menuComponent">
     <template #activator="{ props }">
-      <VBtn v-bind="props" variant="tonal" color="tertiary">
+      <VBtn v-bind="props" :loading="pulling" variant="tonal" color="tertiary">
         Auto Mode: Scheduler
       </VBtn>
     </template>
@@ -17,9 +17,13 @@ import { useDisplay } from "vuetify";
 import { VBottomSheet } from "vuetify/components/VBottomSheet";
 import { VMenu } from "vuetify/components/VMenu";
 
+import { usePulling } from "../../usePulling";
 import Dialog from "./Dialog.vue";
+
 const { mobile } = useDisplay();
 const menuComponent = computed(() => (mobile.value ? VBottomSheet : VMenu));
+
+const { pulling } = await usePulling();
 </script>
 
 <style scoped>

src/components/schedule/auto-mode/auto-mode-button/usePulling.ts

@@ -0,0 +1,30 @@
+import { computed } from "vue";
+import type { Ref } from "vue";
+
+import { useSubscribeScheduleAutoModeState } from "@/api";
+
+interface _UsePullingReturn {
+  pulling: Ref<boolean>;
+}
+
+type UsePullingReturn = _UsePullingReturn & PromiseLike<_UsePullingReturn>;
+
+export function usePulling(): UsePullingReturn {
+  const subscription = useSubscribeScheduleAutoModeState();
+
+  // e.g., "off", "auto_pulling", "auto_running"
+  const state = subscription.autoModeState;
+
+  // true if the second part of the state is "pulling"
+  const pulling = computed(() => state.value?.split("_")[1] === "pulling");
+
+  const ret = { pulling };
+
+  return {
+    ...ret,
+    async then(onFulfilled, onRejected) {
+      await subscription;
+      return Promise.resolve(ret).then(onFulfilled, onRejected);
+    },
+  };
+}