Skip to content

Add shimmer loading skeleton for analysis dashboard #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kushwahnihal25-rgb wants to merge 1 commit into
base: main
Choose a base branch
from
+87 −23
Open

Add shimmer loading skeleton for analysis dashboard #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@
"framer-motion": "^12.38.0",
"i18next": "^26.3.0",
"leaflet": "^1.9.4",
"lucide-react": "^1.16.0",
"lucide-react": "^1.17.0",
"onnxruntime-web": "^1.26.0",
"posthog-js": "^1.376.2",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-hot-toast": "^2.6.0",
"react-i18next": "^17.0.8",
"react-joyride": "^3.1.0",
"react-leaflet": "^5.0.0",
"react-router-dom": "^7.14.0",
"react-router-dom": "^7.17.0",
"tailwindcss": "^4.2.2"
},
"devDependencies": {
Expand Down
21 changes: 21 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,4 +396,25 @@ input::placeholder {

@media print {
nav, .print\:hidden { display: none !important; }
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}

100% {
background-position: 200% 0;
}
}

.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;
Comment on lines +418 to +419

@coderabbitai coderabbitai Bot Jun 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

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.

Suggested change
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

}
45 changes: 37 additions & 8 deletions src/pages/AnalysisDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
console.log("ANALYSIS DASHBOARD LOADED");

@coderabbitai coderabbitai Bot Jun 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Remove module-level debug log (Line 1).

This logs on every module load in production and adds noise to client logs.

Proposed fix 
-console.log("ANALYSIS DASHBOARD LOADED");
 import { useEffect, useState } from 'react';
📝 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
console.log("ANALYSIS DASHBOARD LOADED");
import { useEffect, useState } from 'react';
🤖 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/pages/AnalysisDashboard.tsx` at 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.

import { useEffect, useState } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { ArrowLeft, AlertTriangle, Droplets, Eye as EyeIcon, Fish } from 'lucide-react';
Expand All @@ -19,8 +20,40 @@ function gradeColor(grade: string) {
if (grade === 'B') return 'text-neon';
return 'text-error';
}
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 AnalysisDashboard() {

const [params] = useSearchParams();
const [scan, setScan] = useState<ScanResult | null>(null);
const [loading, setLoading] = useState(true);
Expand All @@ -43,20 +76,16 @@ export default function AnalysisDashboard() {
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load scan data.');
} finally {
setLoading(false);
setLoading(false);
}
}
load();
}, [params]);

// ── Loading state ────────────────────────────────────────────────────────
if (loading) {
return (
<div className="min-h-[calc(100vh-4rem)] flex items-center justify-center">
<StatusTerminal messages={['LOADING_ANALYSIS...', 'FETCHING_RESULT']} />
</div>
);
}
if (loading) {
return <ScanSkeleton />;
}

// ── Error state ──────────────────────────────────────────────────────────
if (error || !scan) {
Expand Down
Loading