Skip to content

refactor(loading): use the shared Spinner for every loader icon - #465

Merged
yhabib merged 2 commits into
mainfrom
refactor/shared-spinner
Oct 6, 2026
Merged

yhabib merged 2 commits into
mainfrom
refactor/shared-spinner

Conversation

@yhabib

@yhabib yhabib commented Oct 1, 2026

Copy link
Copy Markdown
Collaborator

Motivation

The app drew its spinners three ways: raw Loader2 icons, raw Loader icons, and two custom processing halos. Split from #447.

Changes

  • Switched the raw Loader2 and Loader icons to the shared Spinner.
  • Added ProcessingSpinner and used it in MutationDialog and the staking wizard.
  • Removed the AnimatedSpinner and AnimatedLoader helpers.
  • Switched the staking wizard halo from green to the primary color.

Replace the raw `Loader2` and `Loader` icons with the shared `Spinner`.
Replace the two processing halos with one `ProcessingSpinner`.
@yhabib
yhabib requested a review from a team as a code owner October 1, 2026 06:51
Copilot AI balanced review requested due to automatic review settings October 1, 2026 06:51
@zeropath-ai

zeropath-ai Bot commented Oct 1, 2026 •

Copy link
Copy Markdown

✅ No security or compliance issues detected. Reviewed everything up to b892471.

Security Overview
Detected Code Changes
Change Type Relevant files
Enhancement ► src/governance-app-frontend/src/common/components/MutationDialog.tsx
    Replace Loader with ProcessingSpinner and update usage
► src/governance-app-frontend/src/common/components/MutationDialog.tsx
    Remove AnimatedSpinner implementation and use ProcessingSpinner
► src/governance-app-frontend/src/common/components/ProcessingSpinner.tsx
    Add new ProcessingSpinner component
Enhancement ► src/governance-app-frontend/src/common/components/Sonner.tsx
    Use Spinner in loading mapping instead of Loader2
Enhancement ► src/governance-app-frontend/src/features/onboarding/WelcomeModal.tsx
    Replace Loader with Spinner in DetectingFeatures and use Spinner in place of Loader for loading indication
Enhancement ► src/governance-app-frontend/src/features/proposals/components/ProposalDetailsVoting.tsx
    Use Spinner instead of Loader2 for voting status indicators
Enhancement ► src/governance-app-frontend/src/features/proposals/components/ProposalListItem.tsx
    Use Spinner instead of Loader2 for voting indicators
Enhancement ► src/governance-app-frontend/src/features/stakes/components/FollowingStatusAlert.tsx
    Use Spinner instead of Loader2 for pending state
Enhancement ► src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailDissolveView.tsx
    Use Spinner instead of Loader2 while pending
Enhancement ► src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseDelayView.tsx
    Use Spinner instead of Loader2 while pending
Enhancement ► src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseStakeView.tsx
    Use Spinner instead of Loader2 while pending
Enhancement ► src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailMaturityModeView.tsx
    Use Spinner instead of Loader2 while pending
Enhancement ► src/governance-app-frontend/src/features/stakes/components/stakingWizard/StakingWizardStepConfirmation.tsx
    Replace AnimatedLoader with ProcessingSpinner
Enhancement ► src/governance-app-frontend/src/features/voting/components/AdvancedFollowingModal.tsx
    Show Spinner or Plus based on isWaitingForCertifiedData instead of Loader2
Enhancement ► src/governance-app-frontend/src/features/voting/components/KnownNeuronCard.tsx
    Replace Loader2 with Spinner for loading state

@github-actions

github-actions Bot commented Oct 1, 2026 •

Copy link
Copy Markdown

📊 Build Bundle Stats

The latest build generated the following assets:

dist/index.html                                           2.55 kB │ gzip:   0.87 kB
dist/assets/index-94NDCMUr.css                          132.77 kB │ gzip:  21.66 kB
dist/assets/externalServices-CK4eoRia.js                  0.19 kB │ gzip:   0.16 kB
dist/assets/address-BBgU5ncI.js                           0.20 kB │ gzip:   0.15 kB
dist/assets/icpLedger-D3ABJgT6.js                         0.23 kB │ gzip:   0.21 kB
dist/assets/Skeleton-DJUBgvmu.js                          0.46 kB │ gzip:   0.34 kB
dist/assets/useTvlValue-B4PaP6za.js                       0.57 kB │ gzip:   0.39 kB
dist/assets/numbers-CNywxzta.js                           0.58 kB │ gzip:   0.36 kB
dist/assets/service-B68D7PAf.js                           0.59 kB │ gzip:   0.37 kB
dist/assets/PageHeader-Czh9Jiub.js                        0.77 kB │ gzip:   0.45 kB
dist/assets/CertifiedBadge-Dg99-7M2.js                    0.81 kB │ gzip:   0.48 kB
dist/assets/Separator-BdWyMI_l.js                         0.83 kB │ gzip:   0.49 kB
dist/assets/useIcpIndex-D02Rocwn.js                       1.07 kB │ gzip:   0.63 kB
dist/assets/rolldown-runtime-CMxvf4Kt.js                  1.21 kB │ gzip:   0.67 kB
dist/assets/EmptyActionState-DM8XU8xV.js                  1.61 kB │ gzip:   0.83 kB
dist/assets/addressBook-BnYPkN8U.js                       1.66 kB │ gzip:   0.99 kB
dist/assets/useGovernanceAppCanister-Bd5eWLkc.js          1.91 kB │ gzip:   0.96 kB
dist/assets/AnimatedNumber-DpXSEwhz.js                    1.96 kB │ gzip:   1.11 kB
dist/assets/useIcpIndexTransactionsPolling-Kk9NGyTH.js    2.03 kB │ gzip:   1.09 kB
dist/assets/advancedFeatures-CEkdFRgy.js                  2.29 kB │ gzip:   1.08 kB
dist/assets/ToggleGroup-BwCHVeOi.js                       3.09 kB │ gzip:   1.40 kB
dist/assets/tickers-BeZvH0Jy.js                           3.10 kB │ gzip:   1.47 kB
dist/assets/Switch-CH90E5KU.js                            3.22 kB │ gzip:   1.44 kB
dist/assets/AlertDialog-XpTSL0Eg.js                       4.18 kB │ gzip:   1.25 kB
dist/assets/SensitiveValue-C74fKpOl.js                    7.33 kB │ gzip:   3.29 kB
dist/assets/routes-Dkq1LYLY.js                            7.46 kB │ gzip:   2.46 kB
dist/assets/badge-Cv47Ty5p.js                             8.49 kB │ gzip:   2.57 kB
dist/assets/spamFilter-Dc3TvqCA.js                        8.57 kB │ gzip:   3.83 kB
dist/assets/MutationDialog-xhZgOJSx.js                    9.55 kB │ gzip:   3.46 kB
dist/assets/events-DFJ54VDH.js                           10.38 kB │ gzip:   4.11 kB
dist/assets/_id-CUgurcrh.js                              14.33 kB │ gzip:   4.31 kB
dist/assets/_auth-LFf9iSda.js                            17.76 kB │ gzip:   6.53 kB
dist/assets/accounts-C_dYVjSL.js                         23.72 kB │ gzip:   8.18 kB
dist/assets/settings-Dgp-Inf3.js                         42.06 kB │ gzip:  12.12 kB
dist/assets/GetTokens-f8UDap7D.js                        43.96 kB │ gzip:  15.97 kB
dist/assets/dashboard-B4PaxKWV.js                        49.96 kB │ gzip:  15.00 kB
dist/assets/button-C5nuqFxT.js                           59.64 kB │ gzip:  20.42 kB
dist/assets/neurons-9xENMePm.js                          68.27 kB │ gzip:  20.27 kB
dist/assets/voting-kVcq4jyn.js                           69.36 kB │ gzip:  21.26 kB
dist/assets/vendor-md-Dg2Au7-3.js                        73.29 kB │ gzip:  19.98 kB
dist/assets/index-CML5Vwg3.js                            76.93 kB │ gzip:  25.01 kB
dist/assets/neuronDetail-DD5jTdtc.js                     81.78 kB │ gzip:  24.11 kB
dist/assets/vendor-jsqr-CLmE8syL.js                     129.98 kB │ gzip:  47.50 kB
dist/assets/vendor-tanstack-BcUoCue3.js                 161.18 kB │ gzip:  49.34 kB
dist/assets/vendor-core-react-qLCIanUQ.js               189.81 kB │ gzip:  59.76 kB
dist/assets/vendor-recharts-g35xhnbZ.js                 223.45 kB │ gzip:  64.00 kB
dist/assets/vendor-icp-2gDAGydl.js                      411.80 kB │ gzip: 104.29 kB
dist/assets/vendor-libs-BEv-0ukd.js                     554.93 kB │ gzip: 181.04 kB

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot review overview

🟡 Changes recommended

Raw loader icons remain in two loading states despite the PR’s stated complete migration.

Review effort: Balanced
Findings: 1 Medium severity

Open (1)
What changed in this PR

Standardizes loading indicators around shared spinner components.

Changes:

  • Replaces inline Lucide loaders with Spinner.
  • Adds ProcessingSpinner for mutation and staking processing states.
  • Removes duplicated animated loader helpers.
File Description
KnownNeuronCard.tsx Uses shared spinner while loading.
AdvancedFollowingModal.tsx Standardizes certification loading icon.
StakingWizardStepConfirmation.tsx Uses the processing spinner.
NeuronDetailMaturityModeView.tsx Standardizes pending indicator.
NeuronDetailIncreaseStakeView.tsx Standardizes pending indicator.
NeuronDetailIncreaseDelayView.tsx Standardizes pending indicator.
NeuronDetailDissolveView.tsx Standardizes pending indicator.
FollowingStatusAlert.tsx Standardizes processing indicator.
ProposalListItem.tsx Standardizes vote loaders.
ProposalDetailsVoting.tsx Standardizes vote loaders.
ProcessingSpinner.tsx Introduces the shared processing halo.
MutationDialog.tsx Replaces its local animated spinner.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@yhabib yhabib changed the title refactor(loading): use the shared Spinner for every loader icon refactor(loading): use the shared Spinner for mutation loaders Oct 1, 2026
@yhabib
yhabib requested a balanced review from Copilot October 5, 2026 11:30
Copilot AI previously approved these changes Oct 5, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot review overview

🟢 Approved

The focused refactor consistently adopts the shared components without introducing unresolved behavior changes.

Review effort: Balanced
Findings: None

Resolved since last review (1)

Hide both from screen readers. The toast is already a live region, and
visible text names the welcome detection wait.
@yhabib yhabib changed the title refactor(loading): use the shared Spinner for mutation loaders refactor(loading): use the shared Spinner for every loader icon Oct 5, 2026
@yhabib
yhabib requested a balanced review from Copilot October 5, 2026 11:39
Copilot AI dismissed their stale review, a newer Copilot review was requested October 5, 2026 11:39

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot review overview

🟢 Approved

The loader migration is complete and preserves sizing, animation, and accessibility behavior.

Review effort: Balanced
Findings: None

@yhabib
yhabib added this pull request to the merge queue Oct 6, 2026
Merged via the queue into main with commit 5f3ff85 Oct 6, 2026
13 of 14 checks passed
@yhabib
yhabib deleted the refactor/shared-spinner branch October 6, 2026 08:08
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