TheVicky1 / TheVicky1/Pact_OS

ui: refine skeleton loading card borders in analytics workspace

Open Beginner friendly
#38 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area:analytics beginner friendly bug community contributions-welcome difficulty:beginner enhancement good first issue help wanted time:<15m type:ui up-for-grabs
Dominant language
TypeScript
Stars
5
Forks
7
Avg merge
39m
Merged PRs (30d)
39

Description

🎯 What needs to be done

In src/features/analytics/components/analytics-skeleton.tsx, update the summary skeleton cards' border class from border-white/[0.08] to border-white/[0.06] to match production card border styling.

Why this matters

Consistency in skeleton border tokens eliminates visual flicker when placeholder skeletons transition into loaded metric cards.

📍 Where to work

src/features/analytics/components/analytics-skeleton.tsx

🧭 Implementation guidance

  1. Open src/features/analytics/components/analytics-skeleton.tsx.
  2. Locate the summary cards skeleton map around line 24.
  3. Update border-white/[0.08] to border-white/[0.06].
  4. Save the file.

✅ Acceptance criteria

  • Summary skeleton card border token matches production cards (border-white/[0.06]).
  • Linter passes with 0 warnings.

🧪 Verification

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open src/features/analytics/components/analytics-skeleton.tsx and inspect the summary cards skeleton map around line 24. Change the border token from border-white/[0.08] to border-white/[0.06], then run the project linter. Done means the summary skeleton cards match the production border styling and the linter passes with 0 warnings.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, tailwindcss, typescript
Domain
frontend
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
96/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.