Skip to content

feat: Infinite loader on OpenID redirect screen#3672

Open
artkorotkikh-dfinity wants to merge 4 commits intomainfrom
feat/infinite-openid-loader-animation
Open

feat: Infinite loader on OpenID redirect screen#3672
artkorotkikh-dfinity wants to merge 4 commits intomainfrom
feat/infinite-openid-loader-animation

Conversation

@artkorotkikh-dfinity
Copy link
Copy Markdown
Contributor

@artkorotkikh-dfinity artkorotkikh-dfinity commented Mar 13, 2026

Motivation

The OpenID redirect screen ("Signing in securely") used a one-shot 6-second draw animation. Since the sign-in duration is unpredictable, the animation could finish before the process completes — leaving users with a static border and no indication of progress. An infinite loader better communicates that work is still happening.

Changes

  • Replaced the one-shot transition:draw (6s) SVG animation with an infinite CSS stroke-dashoffset rotation on the OpenID redirect screen.
  • Removed unused draw import from svelte/transition

Tests

loader.mp4

…redirect screen

The "Signing in securely" screen now uses a smooth, continuously rotating
stroke animation instead of the previous 6-second draw transition. This
provides better visual feedback when authentication takes longer than expected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@artkorotkikh-dfinity artkorotkikh-dfinity marked this pull request as ready for review March 13, 2026 10:35
Copilot AI review requested due to automatic review settings March 26, 2026 15:07
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves the “Signing in securely” OpenID redirect screen by replacing a one-shot SVG transition:draw animation with an infinite CSS-driven stroke animation, ensuring users continue to see progress feedback for unpredictable sign-in durations.

Changes:

  • Removed the draw transition usage/import and kept fade/scale transitions.
  • Added an infinite stroke “chase” animation via CSS (stroke-dasharray + stroke-dashoffset) for the loader border.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Copy Markdown
Collaborator

@aterga aterga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice change! One small suggestion: the new infinite CSS animation should respect prefers-reduced-motion for accessibility compliance. I've left a suggestion with the fix.


Generated by Claude Code

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.

3 participants