Add shimmer loading skeleton for analysis dashboard#86
Add shimmer loading skeleton for analysis dashboard#86kushwahnihal25-rgb wants to merge 4 commits 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. |
|
🎉 Thank you for your Pull Request! We're thrilled to have your contribution to FreshScan AI. Before we review, please make sure you have:
A maintainer will review your code as soon as possible! |
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Warning
|
| Layer / File(s) | Summary |
|---|---|
Dependency version updates package.json |
Frontend dependencies bumped: lucide-react (1.16.0 → 1.17.0), react (19.2.4 → 19.2.7), react-dom (19.2.4 → 19.2.7), react-router-dom (7.14.0 → 7.17.0). |
Skeleton CSS and component src/index.css, src/components/shared/ScanSkeleton.tsx |
Adds @keyframes shimmer and .skeleton-shimmer CSS; introduces ScanSkeleton() default-export component rendering animated placeholder layout using skeleton-shimmer. |
AnalysisDashboard integration src/pages/AnalysisDashboard.tsx |
Imports ScanSkeleton and replaces the if (loading) render branch to return <ScanSkeleton />, removing the previous StatusTerminal loading UI. |
🎯 3 (Moderate) | ⏱️ ~20 minutes
I nibble code and stitch a gleam,
Soft gradients run — a loading dream,
Fresh versions snug, the dashboard beams,
Skeletons dance in shimmered streams,
Hoppy commits, the UI gleams! 🐰✨
🚥 Pre-merge checks | ✅ 2 | ❌ 3
❌ Failed checks (3 warnings)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Linked Issues check | The PR partially addresses issue #9 requirements: it implements the ScanSkeleton component with shimmer animation, but package.json still contains out-of-scope dependency upgrades that should be reverted per reviewer feedback. |
Revert package.json and package-lock.json to remove React/React Router version bumps, keeping only the code changes in src/index.css, src/pages/AnalysisDashboard.tsx, and src/components/shared/ScanSkeleton.tsx. | |
| Out of Scope Changes check | package.json contains out-of-scope dependency upgrades (lucide-react, react, react-dom, react-router-dom) unrelated to the skeleton UI implementation requirement. | Remove package.json and package-lock.json changes; these dependency upgrades are outside the scope of implementing the loading skeleton for issue #9. |
|
| 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 (2 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. |
✏️ 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.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/index.css`:
- Around line 418-419: Remove the blank line before the animation declaration to
satisfy the declaration-empty-line-before lint rule: ensure the CSS block with
the properties background-size and animation has no empty line between them
(i.e., place animation: shimmer 1.5s linear infinite; directly after
background-size: 200% 100%;), then re-run stylelint to confirm the violation is
resolved.
In `@src/pages/AnalysisDashboard.tsx`:
- Line 1: Remove the module-level console.log("ANALYSIS DASHBOARD LOADED") in
AnalysisDashboard.tsx; either delete this statement or replace it with a
debug-only/logging facility (e.g., use an environment-guard like
process.env.NODE_ENV === "development" or the app's logger) so it does not emit
in production. Target the top-level console.log call in the AnalysisDashboard
module and ensure no other module-level side-effect logs remain.
🪄 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: b5ded911-7428-41fd-8a9c-e0dbc420f0c5
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
package.jsonsrc/index.csssrc/pages/AnalysisDashboard.tsx
| background-size: 200% 100%; | ||
| animation: shimmer 1.5s linear infinite; |
There was a problem hiding this comment.
Fix stylelint violation before animation declaration (Line 418).
There is an empty line before animation that violates declaration-empty-line-before and can fail linting.
Proposed 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;
}📝 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.
| background-size: 200% 100%; | |
| animation: shimmer 1.5s linear infinite; | |
| .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; | |
| } |
🧰 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 418 - 419, Remove the blank line before the
animation declaration to satisfy the declaration-empty-line-before lint rule:
ensure the CSS block with the properties background-size and animation has no
empty line between them (i.e., place animation: shimmer 1.5s linear infinite;
directly after background-size: 200% 100%;), then re-run stylelint to confirm
the violation is resolved.
Source: Linters/SAST tools
jpdevhub
left a comment
jpdevhub
left a comment
There was a problem hiding this comment.
- src/pages/AnalysisDashboard.tsx - Leftover Debugging Log
remove console.log("ANALYSIS DASHBOARD LOADED"); before merging. - package.json & package-lock.json - Out of Scope
evert the changes to package.json and package-lock.json. Their PR should strictly only contain the changes made to src/index.css and src/pages/AnalysisDashboard.tsx.
|
Done. Removed the debug log and reverted package.json/package-lock.json changes as requested. Thanks for the review. Please let me know if any further changes are needed. |
|
Thanks for the updates! We are almost there, but two major acceptance criteria were missed in this latest commit:
Once those two things are fixed, this will be ready to merge! |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 4-31: The ScanSkeleton root container currently uses "p-6
space-y-6 animate-pulse" which differs from the final dashboard layout and
causes layout shift; update the root element in ScanSkeleton (the top-level div
wrapping GlassCard instances) to match the dashboard's outer wrapper classes
(add the same min-height, responsive horizontal padding, centered max-width
wrapper — e.g. include classes like min-h-... , px-..., mx-auto, max-w-4xl —
while preserving internal spacing and animate-pulse) so the skeleton reserves
the same shell dimensions as the loaded dashboard and prevents reflow; keep
GlassCard usages and their internal classes unchanged.
🪄 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: 54ed457b-d840-4363-8dbf-8152317668ff
📒 Files selected for processing (2)
src/components/shared/ScanSkeleton.tsxsrc/pages/AnalysisDashboard.tsx
| <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.
Loading shell dimensions don’t match the final dashboard, causing avoidable layout shift.
Line 4 uses a different outer layout than the loaded dashboard (min-h, responsive horizontal padding, centered max-w-4xl wrapper), so the page reflows when loading completes. This misses the acceptance requirement to minimize content jumping.
Proposed fix
export default function ScanSkeleton() {
return (
- <div className="p-6 space-y-6 animate-pulse">
- <div className="flex flex-col md:flex-row gap-6">
+ <div className="min-h-[calc(100vh-4rem)] px-6 md:px-16 lg:px-24 py-8 md:py-12">
+ <div className="max-w-4xl mx-auto 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="p-4">
- <div className="h-12 skeleton-shimmer rounded"></div>
- </GlassCard>
+ <GlassCard className="p-4">
+ <div className="h-12 skeleton-shimmer rounded"></div>
+ </GlassCard>
+ </div>
</div>
);
}📝 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.
| <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="min-h-[calc(100vh-4rem)] px-6 md:px-16 lg:px-24 py-8 md:py-12"> | |
| <div className="max-w-4xl mx-auto 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> | |
| </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 4 - 31, The ScanSkeleton
root container currently uses "p-6 space-y-6 animate-pulse" which differs from
the final dashboard layout and causes layout shift; update the root element in
ScanSkeleton (the top-level div wrapping GlassCard instances) to match the
dashboard's outer wrapper classes (add the same min-height, responsive
horizontal padding, centered max-width wrapper — e.g. include classes like
min-h-... , px-..., mx-auto, max-w-4xl — while preserving internal spacing and
animate-pulse) so the skeleton reserves the same shell dimensions as the loaded
dashboard and prevents reflow; keep GlassCard usages and their internal classes
unchanged.
2 participants
Description
Closes #9
Added a shimmer loading skeleton for the Analysis Dashboard to improve the user experience while scan data is loading.
Changes Made
ScanSkeletoncomponentTesting
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