(SP: 1) [Frontend] Polish Q&A and leaderboard UI

[ViktorSvertoka]

Summary

• Extracted the Q&A loader into a shared component and removed the square backdrop
• Added smooth staggered accordion entrance after fetch
• Ensured DynamicGridBackground fills the full viewport on Q&A
• Reused the Q&A background on the leaderboard page
• Matched leaderboard title animation to the “Coming soon…” wave style

Closes #282

Summary by CodeRabbit

Release Notes

• New Features

  • Added animated particle-based loader for Q&A sections.
  • Enhanced leaderboard titles with gradient styling and wave effects.
  • Introduced smooth animations for Q&A accordion items.

• UI Improvements

  • Refined Q&A page layout structure for better visual hierarchy.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ready	Preview, Comment	Feb 6, 2026 10:00am

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	dbd9029
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/6985bbab9bb2eb000768d99a
😎 Deploy Preview	https://deploy-preview-283--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR polishes the Q&A and leaderboard interfaces by introducing a new animated particle-based loader component (QaLoader), replacing fixed backgrounds with DynamicGridBackground wrappers, adding smooth entrance animations to accordion items, and enhancing the leaderboard title with gradient text effects.

Changes

Cohort / File(s)	Summary
Q&A Page Layout frontend/app/[locale]/q&a/page.tsx	Replaced static markup wrapper with DynamicGridBackground, integrated QaLoader as Suspense fallback with centered padding, streamlined container structure using main element.
Q&A Components frontend/components/q&a/QaSection.tsx, frontend/components/q&a/AccordionList.tsx	Added memoized animationKey to force AccordionList remounts on page/category changes; introduced per-item animation delays and CSS variables for fade-in, slide-in effects with 500ms duration.
Leaderboard Component frontend/components/leaderboard/LeaderboardClient.tsx	Replaced two-layer fixed background with single DynamicGridBackground; enhanced title with inline-block styling, gradient text span, and aria-friendly decorative wave gradient overlay.
New Loader Component frontend/components/shared/QaLoader.tsx	Introduced new client-side canvas-based animated loader with particle spawning, motion physics, HSLA color blending, optional line connections, and spark effects; supports optional className and size props.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• (SP: 1) [Frontend] About Us Page. Fixed game, topics, mobile layout #183: Updates DynamicGridBackground with showStaticGrid prop, directly affecting how this PR applies the grid background to Q&A and leaderboard pages.
• (SP: 2) [Frontend] Refactor Q&A Tabs: Extract Logic & Align Layout #129: Prior Q&A UI modifications with inline loading spinner that this PR replaces with the new QaLoader component.
• (SP: 2) [Frontend] Q&A UI refresh #169: Concurrent Q&A UI changes updating page layout and QaSection with similar DynamicGridBackground and loader patterns.

Suggested labels

UI

Suggested reviewers

• AM1007

Poem

🐰 A canvas of particles dances with glee,
Accordions slide in so gracefully free,
Gradients shimmer on leaderboard's crown,
Dynamic grids bloom without weighing down,
UI so polished—hop-hop-hooray! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	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 (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: UI polish to Q&A and leaderboard components through shared loader extraction, accordion animation, and background improvements.
Linked Issues check	✅ Passed	All objectives from issue #282 are implemented: shared QaLoader component created, staggered accordion animation added via AccordionList changes, DynamicGridBackground replaces background layers, and wave title animation added to leaderboard.
Out of Scope Changes check	✅ Passed	All changes are scoped to the objectives: QaLoader creation, Q&A page layout restructuring with DynamicGridBackground, AccordionList animation, leaderboard background and title styling.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch qa-ui-fixes

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}