login is functional now

src/pages/Launch.svelte

@@ -1,24 +1,44 @@
 <script lang="ts">
-  import { Button } from "flowbite-svelte";
+  import { Button, Checkbox } from "flowbite-svelte";
   import Progressbar from "../lib/Progressbar.svelte";
+  let progressbarFix = true;
+  let launching = false;
+  let patch = true;
+
+  setTimeout(() => {
+    progressbarFix = false;
+  }, 1000);
 </script>
 
-<main class="h-[265px] my-auto flex flex-col justify-center items-center p-5">
+<main
+  class="h-[265px] my-auto flex flex-col justify-center items-center p-5 animate-fadeIn"
+>
   <div
-    class="container flex flex-col items-center justify-center gap-5 rounded-lg p-3"
+    class="container flex flex-col items-center justify-center gap-3 rounded-lg p-3"
   >
-    <Button color="light" size="xl" class="dark:active:!bg-gray-900"
-      >Launch</Button
+    <Button
+      color="light"
+      size="xl"
+      class="dark:active:!bg-gray-900 {launching
+        ? ''
+        : 'active:scale-95 '}transition-transform duration-75"
+      disabled={launching}
+      on:click={() => (launching = !launching)}>Launch</Button
+    >
+    <Checkbox disabled={launching} bind:checked={patch}>Patch</Checkbox>
+    <div
+      class="w-full flex flex-col justify-center items-center gap-2 mt-2 {launching
+        ? 'animate-fadeIn '
+        : 'animate-fadeOut '}{progressbarFix ? '!opacity-0' : 'opacity-0'}"
     >
-    <div class="w-full flex flex-col justify-center items-center gap-2">
-      <p class="m-0 p-0 dark:text-gray-100">Waiting</p>
       <Progressbar
         animate={true}
         progress={null}
         labelInside={true}
-        size="h-6"
+        size="h-3"
         labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
       />
+      <p class="m-0 p-0 dark:text-gray-400 font-light">Waiting...</p>
     </div>
   </div>
 </main>