Skip to content

fix(pages): use startTransition to eliminate black screen flash during page navigation - #789

Closed
wu21-web wants to merge 7 commits into
alibaba:mainfrom
wu21-web:fix
Closed

fix(pages): use startTransition to eliminate black screen flash during page navigation#789
wu21-web wants to merge 7 commits into
alibaba:mainfrom
wu21-web:fix

Conversation

@wu21-web

@wu21-web wu21-web commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

Description

startTransition keeps old page visible; Suspense fallback navigation only triggers on initial load
and also added a progess bar
and avaliable for deskotp + mobile devices

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Refactoring (no functional changes)
  • Documentation update
  • CI / Build / Tooling

How Has This Been Tested?

  • make test passes locally
  • Manual testing (describe below)
    npm run lint
    npm test gives errors that are not specific to my edits.

Checklist

  • My code follows the project's coding style (go fmt, go vet)
  • I have performed a self-review of my code
  • I have added tests that prove my fix is effective or my feature works
  • New and existing unit tests pass locally with my changes
  • I have updated the documentation accordingly (if applicable)
  • I have signed the CLA

Related Issues

closes #788

@github-actions

github-actions Bot commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

🔍 OpenCodeReview found 4 issue(s) in this PR.

  • ✅ Successfully posted inline: 4 comment(s)

Comment thread .github/workflows/eslint.yml
Comment thread .github/workflows/eslint.yml
Comment thread pages/src/App.tsx Outdated
Comment thread pages/src/App.tsx Outdated
wu21-web and others added 2 commits August 8, 2026 15:20
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
wu21-web and others added 3 commits August 8, 2026 15:28
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@wu21-web
wu21-web marked this pull request as ready for review August 8, 2026 06:51
@lizhengfeng101

Copy link
Copy Markdown
Collaborator

Hi @wu21-web, thank you for taking the time to work on this! Your approach with startTransition + displayLocation is correct, and the progress bar is a nice UX touch.

However, we've decided to go with #792 for this fix, as it takes a similar core approach but also includes:

  • The logic extracted into a reusable hook (useTransitionedLocation)
  • A fix for ScrollToTop syncing with the display location
  • Test coverage for the key scenarios

We'll be closing this PR in favor of #792. That said, if after merging #792 we find that transitions still feel long enough to need visual feedback, we may revisit the progress bar idea — feel free to open a follow-up PR for that if you're interested.

Thanks again for contributing!

@wu21-web wu21-web closed this Aug 8, 2026
@wu21-web

wu21-web commented Aug 8, 2026

Copy link
Copy Markdown
Contributor Author

Thank you, agreed. AI has a better talent in dealing with css and typescripts. 👍

@wu21-web
wu21-web deleted the fix branch August 8, 2026 13:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(pages): use startTransition to eliminate black screen flash during page navigation

2 participants