From 9426ae9eef9e64f30108b93d06f5edd55dae7711 Mon Sep 17 00:00:00 2001
From: Evan Song <theevansong@gmail.com>
Date: Wed, 16 Oct 2024 16:31:47 -0700
Subject: [PATCH] chore(frontend): delay enabling action buttons after server
 startup

Signed-off-by: Evan Song <theevansong@gmail.com>
---
 .../ui/servers/PanelServerActionButton.vue        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
index e3300fff4..a7aac339e 100644
--- a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
+++ b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-row items-center gap-2 rounded-lg">
     <ButtonStyled v-if="showStopButton" type="standard" color="red">
-      <button :disabled="!canTakeAction" @click="killServer">
+      <button :disabled="!canTakeAction || isStartingDelay" @click="killServer">
         <div class="flex gap-1">
           <SlashIcon class="h-5 w-5" />
           <span>{{ killButtonText }}</span>
@@ -9,7 +9,7 @@
       </button>
     </ButtonStyled>
     <ButtonStyled v-if="showStopButton" type="standard" color="red">
-      <button :disabled="!canTakeAction" @click="stopServer">
+      <button :disabled="!canTakeAction || isStartingDelay" @click="stopServer">
         <div class="flex gap-1">
           <StopCircleIcon class="h-5 w-5" />
           <span>{{ stopButtonText }}</span>
@@ -18,7 +18,7 @@
     </ButtonStyled>
 
     <ButtonStyled type="standard" color="brand">
-      <button :disabled="!canTakeAction" @click="handleAction">
+      <button :disabled="!canTakeAction || isStartingDelay" @click="handleAction">
         <div v-if="isStartingOrRestarting" class="grid place-content-center">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path
@@ -106,9 +106,11 @@ const stopButtonText = computed(() => {
 });
 
 const killButtonText = computed(() => {
-  return currentState.value === ServerState.Stopping ? "Stopping..." : "Kill";
+  return "Kill";
 });
 
+const isStartingDelay = ref(false);
+
 const updateState = (newState: ServerStateType) => {
   currentState.value = newState;
 };
@@ -122,6 +124,10 @@ const handleAction = () => {
   } else {
     updateState(ServerState.Starting);
     emit("action", "start");
+    isStartingDelay.value = true;
+    setTimeout(() => {
+      isStartingDelay.value = false;
+    }, 5000);
   }
 };
 
@@ -135,7 +141,6 @@ const stopServer = () => {
 const killServer = () => {
   if (!canTakeAction.value) return;
 
-  updateState(ServerState.Stopping);
   emit("action", "kill");
 };