Add shimmer loading skeleton for analysis dashboard#98
Open
kushwahnihal25-rgb wants to merge 1 commit into
Open
Add shimmer loading skeleton for analysis dashboard#98kushwahnihal25-rgb wants to merge 1 commit into
kushwahnihal25-rgb wants to merge 1 commit into
Conversation
|
@kushwahnihal25-rgb is attempting to deploy a commit to the karan3431's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning
|
| Layer / File(s) | Summary |
|---|---|
Shimmer animation and skeleton styling src/index.css |
CSS foundation adds @keyframes shimmer animation and .skeleton-shimmer class with left-to-right gradient background and infinite animation. |
ScanSkeleton loading component src/components/shared/ScanSkeleton.tsx |
New default-exported React component renders an animated pulse layout with multiple GlassCard wrappers and skeleton placeholder divs using the shimmer styling. |
Dashboard loading state integration src/pages/AnalysisDashboard.tsx |
AnalysisDashboard imports ScanSkeleton and replaces the previous StatusTerminal loading render with an early return of the new skeleton component. |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~8 minutes
Possibly related issues
#9: Main changes implement a ScanSkeleton component and matching shimmer CSS to provide a reusable skeleton loader with shimmer animation for scan results, directly addressing the requested enhancement.
Poem
🐰 A shimmer so bright, left to right it does glide,
Skeleton frames stack with GlassCards as guide,
No more hard-coded messages to delay,
The loading dance now has a better way! ✨
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title accurately summarizes the main change: adding a shimmer loading skeleton component for the analysis dashboard, which is the core purpose of the PR. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
5 tasks
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/shared/ScanSkeleton.tsx`:
- Around line 2-31: The ScanSkeleton component currently provides no accessible
loading semantics; update the top-level container returned by ScanSkeleton to
include role="status" and aria-live="polite" (or "assertive" if immediate
interruption is desired) and add a visually-hidden text node such as a <span
className="sr-only">Loading…</span> (or localized message) inside it so screen
readers announce the loading state; keep the existing visual structure
(GlassCard usage) but ensure the hidden text is inside the same root element so
assistive tech receives the status.
In `@src/index.css`:
- Line 418: The .skeleton-shimmer rule contains an extra empty line before the
background-size declaration which triggers the Stylelint
declaration-empty-line-before error; open the .skeleton-shimmer block, remove
the blank line immediately preceding the background-size: 200% 100%; line (or
adjust to match your project's declaration-empty-line-before style) so the
declaration follows the previous rule without an unexpected empty line.
- Around line 410-420: The shimmer animation on the .skeleton-shimmer selector
lacks a prefers-reduced-motion override; add a media query for
prefers-reduced-motion: reduce that disables or greatly reduces the animation
for .skeleton-shimmer (e.g., set animation to none or animation-duration to 0
and fix background-position), and ensure the `@keyframes` shimmer remains but is
not applied in that media query so motion-sensitive users do not get the
infinite shimmer.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2537c6bf-f10a-4b87-9306-3e436a5247f6
📒 Files selected for processing (3)
src/components/shared/ScanSkeleton.tsxsrc/index.csssrc/pages/AnalysisDashboard.tsx
Comment on lines
+2
to
+31
| export default function ScanSkeleton() { | ||
| return ( | ||
| <div className="p-6 space-y-6 animate-pulse"> | ||
| <div className="flex flex-col md:flex-row gap-6"> | ||
| <GlassCard className="flex-1 p-8"> | ||
| <div className="h-4 w-32 skeleton-shimmer rounded mb-4"></div> | ||
| <div className="h-16 w-40 skeleton-shimmer rounded mb-4"></div> | ||
| <div className="h-2 w-full skeleton-shimmer rounded"></div> | ||
| </GlassCard> | ||
|
|
||
| <GlassCard className="md:w-72 p-6"> | ||
| <div className="h-4 w-24 skeleton-shimmer rounded mb-4"></div> | ||
| <div className="h-8 w-full skeleton-shimmer rounded mb-3"></div> | ||
| <div className="h-8 w-full skeleton-shimmer rounded"></div> | ||
| </GlassCard> | ||
| </div> | ||
|
|
||
| <GlassCard className="p-6"> | ||
| <div className="h-5 w-40 skeleton-shimmer rounded mb-4"></div> | ||
| <div className="space-y-3"> | ||
| <div className="h-16 skeleton-shimmer rounded"></div> | ||
| <div className="h-16 skeleton-shimmer rounded"></div> | ||
| <div className="h-16 skeleton-shimmer rounded"></div> | ||
| </div> | ||
| </GlassCard> | ||
|
|
||
| <GlassCard className="p-4"> | ||
| <div className="h-12 skeleton-shimmer rounded"></div> | ||
| </GlassCard> | ||
| </div> |
There was a problem hiding this comment.
Expose loading semantics for assistive tech.
This skeleton is now the loading UI, but it has no role="status"/aria-live/loading text, so screen reader users don’t get a meaningful loading announcement.
Suggested fix
export default function ScanSkeleton() {
return (
- <div className="p-6 space-y-6 animate-pulse">
+ <div
+ className="p-6 space-y-6 animate-pulse"
+ role="status"
+ aria-live="polite"
+ aria-busy="true"
+ >
+ <span className="sr-only">Loading analysis dashboard</span>
<div className="flex flex-col md:flex-row gap-6">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export default function ScanSkeleton() { | |
| return ( | |
| <div className="p-6 space-y-6 animate-pulse"> | |
| <div className="flex flex-col md:flex-row gap-6"> | |
| <GlassCard className="flex-1 p-8"> | |
| <div className="h-4 w-32 skeleton-shimmer rounded mb-4"></div> | |
| <div className="h-16 w-40 skeleton-shimmer rounded mb-4"></div> | |
| <div className="h-2 w-full skeleton-shimmer rounded"></div> | |
| </GlassCard> | |
| <GlassCard className="md:w-72 p-6"> | |
| <div className="h-4 w-24 skeleton-shimmer rounded mb-4"></div> | |
| <div className="h-8 w-full skeleton-shimmer rounded mb-3"></div> | |
| <div className="h-8 w-full skeleton-shimmer rounded"></div> | |
| </GlassCard> | |
| </div> | |
| <GlassCard className="p-6"> | |
| <div className="h-5 w-40 skeleton-shimmer rounded mb-4"></div> | |
| <div className="space-y-3"> | |
| <div className="h-16 skeleton-shimmer rounded"></div> | |
| <div className="h-16 skeleton-shimmer rounded"></div> | |
| <div className="h-16 skeleton-shimmer rounded"></div> | |
| </div> | |
| </GlassCard> | |
| <GlassCard className="p-4"> | |
| <div className="h-12 skeleton-shimmer rounded"></div> | |
| </GlassCard> | |
| </div> | |
| export default function ScanSkeleton() { | |
| return ( | |
| <div | |
| className="p-6 space-y-6 animate-pulse" | |
| role="status" | |
| aria-live="polite" | |
| aria-busy="true" | |
| > | |
| <span className="sr-only">Loading analysis dashboard</span> | |
| <div className="flex flex-col md:flex-row gap-6"> | |
| <GlassCard className="flex-1 p-8"> | |
| <div className="h-4 w-32 skeleton-shimmer rounded mb-4"></div> | |
| <div className="h-16 w-40 skeleton-shimmer rounded mb-4"></div> | |
| <div className="h-2 w-full skeleton-shimmer rounded"></div> | |
| </GlassCard> | |
| <GlassCard className="md:w-72 p-6"> | |
| <div className="h-4 w-24 skeleton-shimmer rounded mb-4"></div> | |
| <div className="h-8 w-full skeleton-shimmer rounded mb-3"></div> | |
| <div className="h-8 w-full skeleton-shimmer rounded"></div> | |
| </GlassCard> | |
| </div> | |
| <GlassCard className="p-6"> | |
| <div className="h-5 w-40 skeleton-shimmer rounded mb-4"></div> | |
| <div className="space-y-3"> | |
| <div className="h-16 skeleton-shimmer rounded"></div> | |
| <div className="h-16 skeleton-shimmer rounded"></div> | |
| <div className="h-16 skeleton-shimmer rounded"></div> | |
| </div> | |
| </GlassCard> | |
| <GlassCard className="p-4"> | |
| <div className="h-12 skeleton-shimmer rounded"></div> | |
| </GlassCard> | |
| </div> | |
| ) | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/shared/ScanSkeleton.tsx` around lines 2 - 31, The ScanSkeleton
component currently provides no accessible loading semantics; update the
top-level container returned by ScanSkeleton to include role="status" and
aria-live="polite" (or "assertive" if immediate interruption is desired) and add
a visually-hidden text node such as a <span className="sr-only">Loading…</span>
(or localized message) inside it so screen readers announce the loading state;
keep the existing visual structure (GlassCard usage) but ensure the hidden text
is inside the same root element so assistive tech receives the status.
Comment on lines
+410
to
420
| .skeleton-shimmer { | ||
| background: linear-gradient( | ||
| 90deg, | ||
| var(--color-surface-mid) 25%, | ||
| var(--color-surface-highest) 50%, | ||
| var(--color-surface-mid) 75% | ||
| ); | ||
|
|
||
| background-size: 200% 100%; | ||
| animation: shimmer 1.5s linear infinite; | ||
| } No newline at end of file |
There was a problem hiding this comment.
Add a reduced-motion fallback for shimmer animation.
Line 419 runs an infinite animation, but there’s no prefers-reduced-motion override. This can cause accessibility issues for motion-sensitive users and should be disabled/reduced in that mode.
Suggested fix
.skeleton-shimmer {
background: linear-gradient(
90deg,
var(--color-surface-mid) 25%,
var(--color-surface-highest) 50%,
var(--color-surface-mid) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s linear infinite;
}
+
+@media (prefers-reduced-motion: reduce) {
+ .skeleton-shimmer {
+ animation: none;
+ background-position: 0 0;
+ }
+}🧰 Tools
🪛 Stylelint (17.12.0)
[error] 418-418: Expected no empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/index.css` around lines 410 - 420, The shimmer animation on the
.skeleton-shimmer selector lacks a prefers-reduced-motion override; add a media
query for prefers-reduced-motion: reduce that disables or greatly reduces the
animation for .skeleton-shimmer (e.g., set animation to none or
animation-duration to 0 and fix background-position), and ensure the `@keyframes`
shimmer remains but is not applied in that media query so motion-sensitive users
do not get the infinite shimmer.
| var(--color-surface-mid) 75% | ||
| ); | ||
|
|
||
| background-size: 200% 100%; |
There was a problem hiding this comment.
Resolve the Stylelint rule violation in .skeleton-shimmer.
Line 418 is currently flagged by Stylelint (declaration-empty-line-before). Please remove the extra empty line before background-size (or align with your stylelint config) to keep lint green.
🧰 Tools
🪛 Stylelint (17.12.0)
[error] 418-418: Expected no empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/index.css` at line 418, The .skeleton-shimmer rule contains an extra
empty line before the background-size declaration which triggers the Stylelint
declaration-empty-line-before error; open the .skeleton-shimmer block, remove
the blank line immediately preceding the background-size: 200% 100%; line (or
adjust to match your project's declaration-empty-line-before style) so the
declaration follows the previous rule without an unexpected empty line.
Source: Linters/SAST tools
Author
|
Hi @jpdevhub , This is the clean PR requested in the review. Changes included:
All out-of-scope package.json and package-lock.json changes have been removed. Thank you for reviewing. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Implemented a shimmer loading skeleton for the Analysis Dashboard.
Changes
ScanSkeletoncomponent insrc/components/shared/AnalysisDashboard.tsxto use the shared skeleton componentsrc/index.cssNotes
package.jsonandpackage-lock.jsonwere removed.Checklist
npm run lintpasses with no errorsnpm run buildcompiles without TypeScript errorspython -m pytestpasses (including new tests I added).envfiles, API keys, secrets, model weights, or__pycache__in this diffmain, not mergedSummary by CodeRabbit
New Features
Style