feat: add skeleton loaders for history and result pages for issue #11

[AkshuBalkitta]

Closes #11

Problem

Users experienced a "pop-in" effect when navigating to the history and result pages — the page would flash a plain text message before rendering the actual content.

Solution

Created a reusable Skeleton component and implemented skeleton loaders that mirror the real page layouts, so the user sees a structured placeholder instantly instead of a blank flash.

Changes

New file- src/components/ui/Skeleton.tsx

• reusable skeleton loaders using Tailwind CSS

src/app/history/page.tsx

• Replaced "Syncing with Clinical Database..." text with HistoryTableSkeleton
• Skeleton mirrors the real history table with matching cell shapes

src/app/result/page.tsx

• Replaced plain "Loading analysis results..." text with ResultSkeleton
• Skeleton mirrors the full page layout
• Fixed hydration mismatch by moving sessionStorage read to useEffect hook

Why the useEffect fix:

The original code read sessionStorage inside a useState that lead the server and client to render different HTML on first render— server rendered null (skeleton) while client rendered the full page — triggering a React hydration mismatch error. Moving the read to useEffect ensures both server and client start with null and render the same skeleton, then swap to real content afterwards.

Screenshots

[vercel]

@AkshuBalkitta is attempting to deploy a commit to the Pushkarini 's projects Team on Vercel.

A member of the Team first needs to authorize it.