Skip to content

Eliminate minor carpincho-wallet popup layout shifts on loading and unlock-error #63

Description

@gabitoesmiapodo

Part of epic #40. Track: CLS (layout shift). Paths are relative to carpincho-wallet/.

Priority

Medium

User story / Problem statement

Fixed 420x600 popup sizing and explicitly-dimensioned media keep CLS minor in the carpincho-wallet popup, but two layout swaps still shift the submit button: the loading-to-content transition reflows centered→top-aligned, and the unlock error alert is inserted between input and submit button.

Expected outcome

  • The unlock error and the loading-to-content transition reserve layout so they do not shift the submit button or the view.

Acceptance criteria

  • The unlock error alert reserves space (min-height container) so it fades in without displacing the submit button.
  • The loading-to-content transition uses the same column layout (or a same-box skeleton) so flipping isLoading does not reflow centered→top-aligned.

Technical notes

  1. [Medium] src/App.tsx:37 — spinner-to-content swap replaces a vertically centered justify-center spinner with a top-aligned content column (non-loading branch at src/App.tsx:45 drops items-center justify-center). When isLoading flips, layout reflows centered→top-flow. Fix: render the loading state inside the same column layout, or use a same-box skeleton.
  2. [Medium] src/views/UnlockView.tsx:67 — the error Alert is conditionally inserted between input and submit button, pushing the button down when an incorrect password appears. (PasswordStrengthIndicator itself reserves space; src/components/PasswordStrengthIndicator.tsx:35.) Fix: reserve space for the alert (min-height container).
  3. [Low / mitigating] Toasts render via createPortal into a position:fixed viewport (src/components/ui/ToastProvider.tsx:19,:114) and overlay rather than push. No fix.
  4. [Low / mitigating] Sheets/dialogs are Radix Dialog.Portal with fixed positioning and inset-0 overlay (src/components/ui/Sheet.tsx:9), overlaying rather than reflowing. No fix.
  5. [Low / mitigating] Logo img has explicit width/height (src/components/Logo.tsx:13); SVG icons carry hardcoded width/height (src/components/ui/icons.tsx:273); AccountAvatar uses fixed sizes. No icon/avatar CLS risk.
  6. [Low / mitigating] html[data-runtime="extension"] pins width 420px and min-height 600px (src/index.css:358), the primary CLS mitigant; decorative animations use transform/opacity only and are disabled under prefers-reduced-motion. No fix.

Additional context

Method: static (lab/heuristic) review — extension popups have no CrUX field data. Findings 13–16 are mitigating context, not defects; only 11 and 12 require changes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions