FE-04: Replace Synchronous Loading Flash with Skeleton UI for Scan Results

[jpdevhub]

Task Description

To improve perceived performance and reduce layout shift (CLS), replace the current blank state with a CSS-animated shimmer placeholder during the FETCH_SCAN_RESULTS lifecycle.

Context and Background

Create a reusable SkeletonCard component in src/components/shared.
Ensure dimensions match the final rendered ScanResultCard to prevent "jumping" content.
Animation: Linear gradient shift from #f0f0f0 to #e0e0e0 over a 1.5s loop.

Acceptance Criteria

[ ] Skeleton displays immediately upon triggering scan.
[ ] Skeleton is replaced by data-driven components once the Promise resolves.
[ ] No "white flash" visible on 3G throttle testing.

Hints

No response

[harshadashinde2224-gif]

Hi, I would like to work on this issue under SSoC. Can you please assign it to me?

[jpdevhub]

Hi @harshadashinde2224-gif Assigning this issue to you.

Before you start writing any code, please carefully read through the Project Documentation—especially the Frontend Architecture and Design System sections to understand our component flow and styling guidelines.

Once you are familiar with the codebase, please reply here with a brief outline of your approach. Just a few lines explaining how you plan to build the Skeleton UI and integrate it with our existing components.

Once your approach looks solid, you will be good to go! Let me know if you have any questions.

[harshadashinde2224-gif]

Hello! Thank you for assigning the issue. I’ve gone through the project structure and documentation to understand the frontend flow.

Here is my planned approach:

• I will first analyze the existing ScanResultCard component inside the React frontend to match its layout, dimensions, and Tailwind styling exactly, ensuring zero layout shift (CLS).
• Then, I will create a reusable SkeletonCard component in src/components/shared, replicating the same structure using placeholder elements.
• I will implement a shimmer animation using Tailwind/custom CSS with a linear gradient (#f0f0f0 to #e0e0e0) and a 1.5s infinite loop.
• I will integrate this SkeletonCard into the scan workflow by conditionally rendering it during the FETCH_SCAN_RESULTS lifecycle (while the API call is in loading state).
• Once the Promise resolves, I will replace the skeleton with the actual ScanResultCard populated with real data.
• Finally, I will test under throttled network conditions to ensure there is no white flash and transitions remain smooth.

Please let me know if this approach aligns with your expectations or if any adjustments are needed before I proceed.

[jpdevhub]

Just a quick reminder that the official SSoC coding phase begins on June 1st. Feel free to use this time to fork the repo, set up your local dev environment, and read through our Project Documentation so you are ready to hit the ground running.

Let us know if you get stuck or have any questions. Happy coding!

[jpdevhub]

Hey! Thanks for taking this on and sharing your approach. We’re excited to have your help! Before you jump into the code, there are just a few quick adjustments needed to align with our setup:

Keep it Dark Mode (No Hardcoded Colors): Using #f0f0f0 to #e0e0e0 will cause a blinding white flash on our dark theme! Please stick to the design tokens in src/index.css. For the shimmer, animate between var(--color-surface-mid) and var(--color-surface-highest) so it blends perfectly.

Match the Existing Layout: We actually don't have a single ScanResultCard. The results are built using multiple GlassCard components right inside src/pages/AnalysisDashboard.tsx. You'll want to replicate that entire layout block with skeletons so there's zero layout shift. (No need to create a shared folder—you can drop your skeleton component directly into src/components/).

Loading State: Instead of a FETCH_SCAN_RESULTS hook, we just use a simple loading boolean state in AnalysisDashboard.tsx. Just swap out the current loading view for your new skeleton layout.

Looking forward to your PR! Let me know if you run into any questions about the CSS tokens or the layout structure.

[harshadashinde2224-gif]

Thanks for the clarification! I'll update my approach accordingly.

• I'll use the existing design tokens from src/index.css and animate the shimmer between var(--color-surface-mid) and var(--color-surface-highest) to ensure it works seamlessly with dark mode.
• I'll mirror the current layout in AnalysisDashboard.tsx by creating skeleton versions of the existing GlassCard sections, avoiding any layout shift.
• I'll place the skeleton component directly in src/components/ as suggested.
• I'll replace the current loading view using the existing loading boolean state in AnalysisDashboard.tsx rather than introducing a new fetch hook.

Thanks for pointing me in the right direction. I'll proceed with these changes and reach out if I have any questions about the CSS tokens or layout implementation.