Skip to content

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

@gabitoesmiapodo

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions