refactor: callback finished refreshServerState

components/Brand/Loading.vue

@@ -5,14 +5,12 @@ import '~/assets/main.css';
 export interface Props {
   gradientStart?: string;
   gradientStop?: string;
-  height?: number,
   title?: string,
 }
 
 withDefaults(defineProps<Props>(), {
   gradientStart: '#e32929',
   gradientStop: '#ff8d30',
-  height: 64,
   title: 'Loading',
 });
 </script>
@@ -22,7 +20,7 @@ withDefaults(defineProps<Props>(), {
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 133.52 76.97"
-    :class="`unraid_mark h-[${height}px]`"
+    :class="`unraid_mark`"
     role="img"
   >
     <title>{{ title }}</title>

components/Modals.ce.vue

@@ -24,4 +24,69 @@ const { trialModalVisible } = storeToRefs(useTrialStore());
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.DropdownWrapper_blip {
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow-beta);
+
+  &::before {
+    @apply absolute z-20 block;
+
+    content: '';
+    width: 0;
+    height: 0;
+    top: -10px;
+    right: 42px;
+    border-right: 11px solid transparent;
+    border-bottom: 11px solid var(--color-alpha);
+    border-left: 11px solid transparent;
+  }
+}
+
+.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);
+  }
+}
 </style>

components/UserProfile.ce.vue

@@ -75,6 +75,8 @@ onBeforeMount(() => {
    */
   callbackStore.watcher();
 });
+
+watch(description, (value) => console.debug('[watch:description]', value));
 </script>
 
 <template>
@@ -117,4 +119,69 @@ onBeforeMount(() => {
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.DropdownWrapper_blip {
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow-beta);
+
+  &::before {
+    @apply absolute z-20 block;
+
+    content: '';
+    width: 0;
+    height: 0;
+    top: -10px;
+    right: 42px;
+    border-right: 11px solid transparent;
+    border-bottom: 11px solid var(--color-alpha);
+    border-left: 11px solid transparent;
+  }
+}
+
+.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);
+  }
+}
 </style>

components/UserProfile/CallbackFeedback.vue

@@ -26,7 +26,6 @@ const promoStore = usePromoStore();
 const serverStore = useServerStore();
 
 const {
-  accountAction,
   accountActionHide,
   accountActionStatus,
   accountActionStatusCopy,
@@ -46,12 +45,9 @@ const {
   connectPluginInstalled,
   registered,
   authAction,
+  refreshedServerState,
 } = storeToRefs(serverStore);
 
-/** @todo if post purchase/upgrade thank user for their purchase and support */
-/** @todo if post purchase/upgrade and no Connect, show CTA to Connect promo */
-/** @todo if signing in show CTA to head to Connect settings to enable features */
-
 /**
  * Post sign in success state:
  * If we're on the Connect settings page in the webGUI
@@ -92,10 +88,15 @@ const subheading = computed(() => {
   return '';
 });
 
+const closeText = computed(() => {
+  const txt = !connectPluginInstalled.value ? 'No Thanks' : 'Close'
+  return refreshedServerState.value ? txt : 'Reload';
+});
 const close = () => {
   if (callbackStatus.value === 'loading') return console.debug('[close] not allowed');
-  window.location.reload();
-  // callbackActionsStore.setCallbackStatus('ready');
+  return refreshedServerState.value
+    ? callbackActionsStore.setCallbackStatus('ready')
+    : window.location.reload();
 };
 
 const promoClick = () => {
@@ -122,6 +123,8 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
         v-if="keyInstallStatus !== 'ready' || accountActionStatus !== 'ready'"
         class="text-center relative w-full flex flex-col justify-center gap-y-16px py-24px sm:py-32px"
       >
+        <BrandLoading v-if="callbackStatus === 'loading'" class="w-[110px] mx-auto" />
+
         <UpcCallbackFeedbackStatus
           v-if="keyInstallStatus !== 'ready'"
           :success="keyInstallStatus === 'success'"
@@ -192,7 +195,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
         <BrandButton
           @click="close"
           btn-style="underline"
-          :text="!connectPluginInstalled ? 'No Thanks' : 'Close'" />
+          :text="closeText" />
       </div>
     </template>
   </Modal>

components/UserProfile/DropdownConnectStatus.vue

@@ -5,28 +5,28 @@ type ApiOnlineStatus = 'online'|'offline';
 const onlineStatus = ref<ApiOnlineStatus>('online');
 const apiLoading = ref(false);
 
-import { useQuery } from '@vue/apollo-composable';
+// import { useQuery } from '@vue/apollo-composable';
 
-import {
-  TEST_FRAGMENT,
-  TEST_QUERY,
-} from './DropdownConnectStatus.fragment';
-import { useFragment } from '@/composables/gql/fragment-masking';
+// import {
+//   TEST_FRAGMENT,
+//   TEST_QUERY,
+// } from './DropdownConnectStatus.fragment';
+// import { useFragment } from '@/composables/gql/fragment-masking';
 
-const { result: newResult } = useQuery(
-  TEST_QUERY,
-);
-const result = computed(() => useFragment(TEST_FRAGMENT, newResult.value?.cloud));
+// const { result: newResult } = useQuery(
+//   TEST_QUERY,
+// );
+// const result = computed(() => useFragment(TEST_FRAGMENT, newResult.value?.cloud));
 
-watch(result, (newVal, oldVal) => {
-  console.log('result', newVal, oldVal);
-});
+// watch(result, (newVal, oldVal) => {
+//   console.log('result', newVal, oldVal);
+// });
 </script>
 
 <template>
   <li class="px-8px flex flex-col items-center">
     <template v-if="apiLoading">
-      <BrandLoading class="w-36px mx-auto" :height="21" />
+      <BrandLoading class="w-36px mx-auto" />
       <span class="text-12px italic opacity-80">{{ 'Loading Connect status…' }}</span>
     </template>
     <span