Add loading skeletons and empty states

[suyashhhh26]

Add Loading Skeletons and Empty States for Scan Dashboard UI

Overview

This PR improves the overall user experience of the scan-related pages by adding loading skeletons, reusable loading indicators, and informative empty states. These enhancements provide smooth visual feedback while API data is loading and improve the interface when no data is available.

---

Changes Made

1. Added Reusable Loading Components

LoadingSkeleton

Created a reusable skeleton component with multiple variants:

• Card
• List Item
• Table Row
• Metric
• Chart

This helps display placeholder layouts while data is being fetched.

LoadingIndicator

Added animated loading indicators with multiple styles:

• Spinner
• Dots
• Bars
• Pulse

Provides consistent loading animations across the application.

---

2. Added Empty State Component

EmptyState

Implemented a configurable empty state component for:

• Scans
• Reports
• Findings
• Assets

Features:

• Improved UI visuals
• Better user guidance
• Dynamic messaging
• Proper icon integration

Also fixed Hugeicons import issues related to empty state icons.

---

3. Added useLoadingState Hook

Created a custom hook for handling loading behavior efficiently.

Features:

• Centralized loading state management
• Flicker prevention
• Configurable loading delay
• Smooth UI transitions

---

4. Integrated Components into Pages

Updated the following pages:

• Dashboard
• Scans
• Reports

Each page now:

• Shows loading skeletons during API calls
• Displays proper empty states when no data exists
• Provides smoother transitions between loading and loaded content

---

Benefits

• Improved user experience during API loading
• Eliminates blank screen moments
• Consistent loading and empty state UI across pages
• Better perceived performance
• Cleaner and more professional interface
• Reduced UI flickering on fast requests

---

Testing

Verified Functionality

• Loading skeletons display correctly during API fetches
• Empty states appear properly when datasets are empty
• Smooth transitions between loading and loaded content
• No console errors or build warnings
• Components work correctly across all updated pages

---

Testing Steps

1. Run frontend:

npm run dev

2. Run backend:

python -m uvicorn backend.secuscan.main:app --reload --port 8000

3. Open:

http://127.0.0.1:5174/dashboard

4. Verify:

• Skeleton loaders appear during fetch
• Empty states appear when no data exists
• No UI flickering or console issues

---

Files Changed

• frontend/src/components/LoadingSkeleton.tsx
• frontend/src/components/EmptyState.tsx
• frontend/src/components/LoadingIndicator.tsx
• frontend/src/hooks/useLoadingState.ts
• frontend/src/pages/Dashboard.tsx
• frontend/src/pages/Scans.tsx
• frontend/src/pages/Reports.tsx

---

Type of Change

• New Feature
• Bug Fix
• Breaking Change
• Documentation Update

closes #53

[suyashhhh26]

Hi @Ritesh2332 @aqilaziz @Ritesh2332 @Bihan-Banerjee @prasiddhapal @utksh1

I have implemented loading skeletons, reusable loading indicators, and improved empty states across the Dashboard, Scans, and Reports pages to enhance the overall user experience during loading and no-data scenarios.

The PR also includes:

• Reusable skeleton components
• Configurable empty states
• useLoadingState hook for flicker prevention
• Smooth loading transitions
• Hugeicons import fixes

I noticed that merging is currently blocked because at least one approving review is required from a reviewer with write access.

Please review the PR whenever possible. Looking forward to your feedback.

[utksh1]

CI is failing (formatting-hygiene and frontend-checks). Please fix the failing checks and re-push. After CI is green, I can re-review for merge.