feat(onboarding-ui): clarify rename reconnect flow

- Purpose: make the server-rename success flow clearer while the browser reconnects on the new host.
- Before: the summary dialog closed immediately into a redirect/reload with no dedicated transition state, and the rename notice used stronger visual emphasis with longer copy.
- Problem: users could feel like the page jumped unexpectedly or worry that a reload/sign-in prompt meant onboarding progress was lost.
- Change: add a neutral informational alert to the result dialog, show a loading state while waiting for the redirect/reload handoff, and tighten the rename messaging.
- How: reuse the existing loading component during post-confirm transition, store a rename follow-up message for the success modal, and extend the summary-step tests to cover the new reconnect UX.

Author: Ajit-Mehrotra

web/__test__/components/Onboarding/OnboardingSummaryStep.test.ts

@@ -149,6 +149,9 @@ vi.mock('@unraid/ui', () => ({
     props: ['items', 'type', 'collapsible', 'class'],
     template: `<div data-testid="accordion"><template v-for="item in items" :key="item.value"><slot name="trigger" :item="item" :open="false" /><slot name="content" :item="item" :open="false" /></template></div>`,
   },
+  Spinner: {
+    template: '<div data-testid="spinner" />',
+  },
 }));
 
 vi.mock('@/components/Onboarding/components/OnboardingConsole.vue', () => ({
@@ -247,7 +250,9 @@ const setupApolloMocks = () => {
 };
 
 const mountComponent = (props: Record<string, unknown> = {}) => {
-  const onComplete = vi.fn();
+  const onComplete =
+    (props.onComplete as (() => void | Promise<void>) | undefined) ??
+    vi.fn<() => void | Promise<void>>();
   const wrapper = mount(OnboardingSummaryStep, {
     props: {
       draft: {
@@ -312,6 +317,7 @@ const mountComponent = (props: Record<string, unknown> = {}) => {
       vm.showBootDriveWarningDialog ? 'Confirm Drive Wipe' : '',
       vm.showApplyResultDialog ? vm.applyResultTitle : '',
       vm.showApplyResultDialog ? vm.applyResultMessage : '',
+      vm.showApplyResultDialog ? (vm.applyResultFollowUpMessage ?? '') : '',
     ]
       .filter(Boolean)
       .join(' ');
@@ -327,6 +333,7 @@ interface SummaryVm {
   showBootDriveWarningDialog: boolean;
   applyResultTitle: string;
   applyResultMessage: string;
+  applyResultFollowUpMessage: string | null;
   applyResultSeverity: 'success' | 'warning' | 'error';
   handleBootDriveWarningConfirm: () => Promise<void>;
   handleBootDriveWarningCancel: () => void;
@@ -1091,6 +1098,12 @@ describe('OnboardingSummaryStep', () => {
       sysModel: undefined,
     });
     expect(onComplete).not.toHaveBeenCalled();
+    expect(getSummaryVm(wrapper).applyResultFollowUpMessage).toContain(
+      'Your server name has been updated. The page may reload or prompt you to sign in again.'
+    );
+    expect(wrapper.text()).toContain(
+      'Your server name has been updated. The page may reload or prompt you to sign in again.'
+    );
 
     await clickButtonByText(wrapper, 'OK');
 
@@ -1113,6 +1126,50 @@ describe('OnboardingSummaryStep', () => {
     expect(mockLocation.reload).not.toHaveBeenCalled();
   });
 
+  it('shows a loading state while waiting to reconnect after a successful server rename', async () => {
+    draftStore.serverName = 'Newtower';
+    updateServerIdentityMock.mockResolvedValue({
+      data: {
+        updateServerIdentity: {
+          id: 'local',
+          name: 'Newtower',
+          comment: '',
+          defaultUrl: 'https://Newtower.local:4443',
+        },
+      },
+    });
+
+    let resolveOnComplete: (() => void) | undefined;
+    const onComplete = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveOnComplete = resolve;
+        })
+    );
+
+    const { wrapper } = mountComponent({ onComplete });
+
+    await clickApply(wrapper);
+
+    const confirmPromise = getSummaryVm(wrapper).handleApplyResultConfirm();
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="onboarding-loading-state"]').exists()).toBe(true);
+    expect(wrapper.text()).toContain('Refreshing your connection');
+    expect(wrapper.text()).toContain(
+      'Your server name has been updated. The page may reload or prompt you to sign in again.'
+    );
+    expect(mockLocation.replace).not.toHaveBeenCalled();
+    expect(mockLocation.reload).not.toHaveBeenCalled();
+
+    resolveOnComplete?.();
+    await confirmPromise;
+    await flushPromises();
+
+    expect(onComplete).toHaveBeenCalledTimes(1);
+    expect(mockLocation.replace).toHaveBeenCalledWith('https://newtower.local:4443/');
+  });
+
   it('reloads the current page instead of redirecting when the user is on an IP-based URL', async () => {
     draftStore.serverName = 'Newtower';
     mockLocation.hostname = '192.168.1.2';

web/src/components/Onboarding/steps/OnboardingSummaryStep.vue

@@ -188,8 +188,10 @@ const showBootDriveWarningDialog = ref(false);
 const applyResultTitle = ref('');
 const applyResultMessage = ref('');
 const applyResultSeverity = ref<'success' | 'warning' | 'error'>('success');
+const applyResultFollowUpMessage = ref<string | null>(null);
 const shouldReloadAfterApplyResult = ref(false);
 const redirectUrlAfterApplyResult = ref<string | null>(null);
+const isTransitioningAfterApplyResult = ref(false);
 const summaryT = (key: string, values?: Record<string, unknown>) =>
   t(`onboarding.summaryStep.${key}`, values ?? {});
 
@@ -608,6 +610,8 @@ const handleComplete = async () => {
   isProcessing.value = true;
   error.value = null;
   logs.value = []; // Clear logs
+  applyResultFollowUpMessage.value = null;
+  isTransitioningAfterApplyResult.value = false;
   shouldReloadAfterApplyResult.value = false;
   redirectUrlAfterApplyResult.value = null;
 
@@ -694,6 +698,7 @@ const handleComplete = async () => {
           shouldRetryNetworkMutations
         );
         if (serverNameChanged) {
+          applyResultFollowUpMessage.value = summaryT('result.renameFollowUpMessage');
           if (useReturnedDefaultUrlAfterRename) {
             const defaultUrl = result?.data?.updateServerIdentity?.defaultUrl;
             if (!defaultUrl) {
@@ -1091,22 +1096,27 @@ const handleComplete = async () => {
 
 const handleApplyResultConfirm = async () => {
   showApplyResultDialog.value = false;
-  await Promise.resolve(props.onComplete());
-
   if (!shouldReloadAfterApplyResult.value) {
+    await Promise.resolve(props.onComplete());
     return;
   }
 
-  shouldReloadAfterApplyResult.value = false;
+  isTransitioningAfterApplyResult.value = true;
   const redirectUrl = redirectUrlAfterApplyResult.value;
+  shouldReloadAfterApplyResult.value = false;
   redirectUrlAfterApplyResult.value = null;
-  await nextTick();
-  if (redirectUrl) {
-    location.replace(redirectUrl);
-    return;
-  }
+  try {
+    await Promise.resolve(props.onComplete());
+    await nextTick();
+    if (redirectUrl) {
+      location.replace(redirectUrl);
+      return;
+    }
 
-  location.reload();
+    location.reload();
+  } finally {
+    isTransitioningAfterApplyResult.value = false;
+  }
 };
 
 const handleApplyClick = async () => {
@@ -1136,9 +1146,15 @@ const handleBack = () => {
 <template>
   <div class="mx-auto w-full max-w-4xl px-4 pb-4 md:px-8">
     <OnboardingLoadingState
-      v-if="props.isSavingStep"
-      :title="t('onboarding.loading.title')"
-      :description="t('onboarding.loading.description')"
+      v-if="props.isSavingStep || isTransitioningAfterApplyResult"
+      :title="
+        isTransitioningAfterApplyResult ? summaryT('transition.title') : t('onboarding.loading.title')
+      "
+      :description="
+        isTransitioningAfterApplyResult
+          ? summaryT('transition.description')
+          : t('onboarding.loading.description')
+      "
     />
 
     <div v-else class="bg-elevated border-muted rounded-xl border p-6 text-left shadow-sm md:p-10">
@@ -1421,12 +1437,24 @@ const handleBack = () => {
             : 'z-50 max-w-md',
         }"
       >
-        <template v-if="showDiagnosticLogsInResultDialog" #body>
+        <template v-if="showDiagnosticLogsInResultDialog || applyResultFollowUpMessage" #body>
           <div class="space-y-3">
-            <h4 class="text-sm font-semibold tracking-wide uppercase">
-              {{ t('onboarding.summaryStep.diagnosticLogs') }}
-            </h4>
-            <OnboardingConsole :logs="logs" :title="t('onboarding.summaryStep.onboardingDiagnostics')" />
+            <UAlert
+              v-if="applyResultFollowUpMessage"
+              color="neutral"
+              variant="subtle"
+              :description="applyResultFollowUpMessage"
+              icon="i-heroicons-information-circle"
+            />
+            <template v-if="showDiagnosticLogsInResultDialog">
+              <h4 class="text-sm font-semibold tracking-wide uppercase">
+                {{ t('onboarding.summaryStep.diagnosticLogs') }}
+              </h4>
+              <OnboardingConsole
+                :logs="logs"
+                :title="t('onboarding.summaryStep.onboardingDiagnostics')"
+              />
+            </template>
           </div>
         </template>
         <template #footer>

web/src/locales/en.json

@@ -341,8 +341,11 @@
   "onboarding.summaryStep.result.noChangesMessage": "There were no onboarding updates to apply, so nothing was changed.",
   "onboarding.summaryStep.result.successTitle": "Setup Applied",
   "onboarding.summaryStep.result.successMessage": "Your onboarding settings were applied successfully.",
+  "onboarding.summaryStep.result.renameFollowUpMessage": "Your server name has been updated. The page may reload or prompt you to sign in again. Your onboarding progress will not be affected.",
   "onboarding.summaryStep.result.failedTitle": "Setup Failed",
   "onboarding.summaryStep.result.failedMessage": "An unexpected error interrupted onboarding. Review the logs below and share them with support.",
+  "onboarding.summaryStep.transition.title": "Refreshing your connection",
+  "onboarding.summaryStep.transition.description": "Your server name has been updated. The page may reload or prompt you to sign in again. Your onboarding progress will not be affected.",
   "onboarding.licenseStep.title": "Unraid OS License",
   "onboarding.licenseStep.description": "Ready for activation. Click below to manage your license and server registration in the Unraid Account App.",
   "onboarding.licenseStep.status.registered": "Registered",