From 67b77344d61fa663411f99a9518296f31969078e Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 6 Aug 2026 17:13:55 -0700
Subject: [PATCH] fix(desktop): next/back navigation during key creation
 onboarding (#4978)

**Category:** fix
**User Impact:** Users can navigate back while an identity key is being
created, while Next remains visible and unavailable until creation
finishes.
**Problem:** The key-creation hold hid both navigation actions, leaving
users without an escape route or a clear indication of what would happen
next. **Solution:** Keep the onboarding footer mounted throughout
creation, leave Back enabled, and gate Next on the completed identity
state.

<details>
<summary>File changes</summary>

**desktop/src/features/onboarding/ui/BackupStep.tsx**
Keeps the onboarding navigation footer visible during key creation, with
Back available and Next disabled until the identity is ready.

**desktop/tests/e2e/onboarding-backup.spec.ts**
Covers the loading and completed navigation states so the intended
behavior cannot quietly crawl back out of the pit.

</details>

## Reproduction steps

1. Start desktop onboarding and choose to create a new identity.
2. Submit the profile step and observe the key-creation screen.
3. Confirm Back is enabled while Next is visible but disabled.
4. Wait for key creation to finish and confirm Next becomes enabled.


## Screenshots

| Before | After |
| --- | --- |
| Navigation actions are hidden during key creation. | Back remains
enabled while Next stays visible and disabled. |
| ![Before: key creation screen without navigation
actions](https://d24qwcpro867f5.cloudfront.net/repos/buzz/prs/4978/key-creation-before-bird.png)
| ![After: key creation screen with disabled Next and enabled
Back](https://d24qwcpro867f5.cloudfront.net/repos/buzz/prs/4978/key-creation-after-bird.png)
|

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../src/features/onboarding/ui/BackupStep.tsx | 42 +++++++++----------
 desktop/tests/e2e/onboarding-backup.spec.ts   |  4 ++
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index 99d9c6324d..2367b9faf9 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -410,29 +410,27 @@ export function BackupStep({
         </div>
       )}
 
-      {created ? (
-        <OnboardingFooter className={REVEAL_ANIMATION_CLASS}>
-          <Button
-            className={ONBOARDING_PRIMARY_CTA_CLASS}
-            data-testid="onboarding-next"
-            disabled={backupNextDisabled()}
-            onClick={onNext}
-            type="button"
-          >
-            Next
-          </Button>
+      <OnboardingFooter className={REVEAL_ANIMATION_CLASS}>
+        <Button
+          className={ONBOARDING_PRIMARY_CTA_CLASS}
+          data-testid="onboarding-next"
+          disabled={!created || backupNextDisabled()}
+          onClick={onNext}
+          type="button"
+        >
+          Next
+        </Button>
 
-          <Button
-            className={ONBOARDING_SECONDARY_CTA_CLASS}
-            data-testid="onboarding-back"
-            onClick={onBack}
-            type="button"
-            variant="ghost"
-          >
-            Back
-          </Button>
-        </OnboardingFooter>
-      ) : null}
+        <Button
+          className={ONBOARDING_SECONDARY_CTA_CLASS}
+          data-testid="onboarding-back"
+          onClick={onBack}
+          type="button"
+          variant="ghost"
+        >
+          Back
+        </Button>
+      </OnboardingFooter>
     </OnboardingSlideTransition>
   );
 }
diff --git a/desktop/tests/e2e/onboarding-backup.spec.ts b/desktop/tests/e2e/onboarding-backup.spec.ts
index df3528c8bd..4b9040bd2b 100644
--- a/desktop/tests/e2e/onboarding-backup.spec.ts
+++ b/desktop/tests/e2e/onboarding-backup.spec.ts
@@ -59,6 +59,9 @@ test("backup step appears on fresh-key path after profile submit", async ({
     page.getByRole("heading", { name: "Creating your identity key" }),
   ).toBeVisible();
   await expect(page.getByTestId("backup-intro-logo")).toBeVisible();
+  await expect(page.getByTestId("onboarding-next")).toBeVisible();
+  await expect(page.getByTestId("onboarding-next")).toBeDisabled();
+  await expect(page.getByTestId("onboarding-back")).toBeEnabled();
 
   await expect(
     page.getByRole("heading", {
@@ -66,6 +69,7 @@ test("backup step appears on fresh-key path after profile submit", async ({
     }),
   ).toBeVisible();
   await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
+  await expect(page.getByTestId("onboarding-next")).toBeEnabled();
 });
 
 // ---------------------------------------------------------------------------