From 9b9a6998b783f5786d4ffa376a3775996ef7751f Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 7 Nov 2023 10:17:07 -0800
Subject: [PATCH] refactor(web): update page redirect

---
 web/components/UpdateOs.ce.vue             | 61 ++++++++++++++++++++++
 web/components/UpdateOs/CallbackButton.vue | 12 -----
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/web/components/UpdateOs.ce.vue b/web/components/UpdateOs.ce.vue
index 82afe8c9b..1762084ef 100644
--- a/web/components/UpdateOs.ce.vue
+++ b/web/components/UpdateOs.ce.vue
@@ -18,6 +18,7 @@ fi
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
+import { WEBGUI_TOOLS_UPDATE } from '~/helpers/urls';
 import { useUpdateOsActionsStore } from '~/store/updateOsActions';
 
 import 'tailwindcss/tailwind.css';
@@ -34,11 +35,22 @@ const subtitle = computed(() => {
   }
   return '';
 });
+
+/** when we're not prompting for reboot /Tools/Update will automatically send the user to account.unraid.net/server/update-os */
+const showLoader = computed(() => window.location.pathname === WEBGUI_TOOLS_UPDATE.pathname && rebootType.value === '')
+
+onBeforeMount(() => {
+  if (showLoader.value) {
+    updateOsActionsStore.executeUpdateOsCallback(true);
+  }
+});
 </script>
 
 <template>
   <UiPageContainer>
+    <BrandLoading v-if="showLoader" class="mx-auto my-12 max-w-160px" />
     <UpdateOsStatus
+      v-else
       :show-update-check="true"
       :title="t('Update Unraid OS')"
       :subtitle="subtitle"
@@ -50,5 +62,54 @@ const subtitle = computed(() => {
 <style lang="postcss">
 @tailwind base;
 @tailwind components;
+
+.unraid_mark_2,
+.unraid_mark_4 {
+  animation: mark_2 1.5s ease infinite;
+}
+.unraid_mark_3 {
+  animation: mark_3 1.5s ease infinite;
+}
+.unraid_mark_6,
+.unraid_mark_8 {
+  animation: mark_6 1.5s ease infinite;
+}
+.unraid_mark_7 {
+  animation: mark_7 1.5s ease infinite;
+}
+
+@keyframes mark_2 {
+  50% {
+    transform: translateY(-40px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes mark_3 {
+  50% {
+    transform: translateY(-62px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes mark_6 {
+  50% {
+    transform: translateY(40px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes mark_7 {
+  50% {
+    transform: translateY(62px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
 @tailwind utilities;
 </style>
diff --git a/web/components/UpdateOs/CallbackButton.vue b/web/components/UpdateOs/CallbackButton.vue
index ab7e72aa5..cb5233fc3 100644
--- a/web/components/UpdateOs/CallbackButton.vue
+++ b/web/components/UpdateOs/CallbackButton.vue
@@ -3,23 +3,11 @@ import { ArrowPathIcon, ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/soli
 import { storeToRefs } from 'pinia';
 import { onBeforeMount } from 'vue';
 
-import { WEBGUI_TOOLS_UPDATE } from '~/helpers/urls';
-import { useUpdateOsActionsStore } from '~/store/updateOsActions';
-
 defineProps<{
   t: any;
 }>();
 
 const updateOsActionsStore = useUpdateOsActionsStore();
-
-const { rebootType } = storeToRefs(updateOsActionsStore);
-
-onBeforeMount(() => {
-  /** when we're not prompting for reboot /Tools/Update will automatically send the user to account.unraid.net/server/update-os */
-  if (window.location.pathname === WEBGUI_TOOLS_UPDATE.pathname && rebootType.value === '') {
-    updateOsActionsStore.executeUpdateOsCallback(true);
-  }
-});
 </script>
 
 <template>