Changed loading page to have a spinning animation.

[Kr-Utkarsh-01]

---

name: " Pull Request"
about: Propose and submit changes to the project for review
title: "PR: [Changed loading page to have a spinning animation instead of "Loading..." text.]"
labels: ""

Related Issue

• Closes [FOSSOVERFLOW-25] feat: add a loading screen with spin animation #152

---

Changes Introduced

• Updated: [Updated the old loading screen having just the "Loading..." text to a new spinning animation with a Loading text beneath it at the center of the page]

---

Screenshots / Video (if applicable)

| Before |

| After |

Summary by CodeRabbit

• Style
  • Enhanced the loading screen with a fullscreen, centered container. Added a visual spinner element and improved styling with refined background color and layering for a more polished user experience.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@Kr-Utkarsh-01 is attempting to deploy a commit to the openlake's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

The LoadingScreen component in the frontend has been enhanced to display a fullscreen, centered loading interface with a spinner animation and prominent text, replacing the previous basic loading markup for improved user experience during loading states.

Changes

Cohort / File(s)	Summary
Loading Screen UI Enhancement frontend/src/Components/common/LoadingScreen.js	Replaced basic "Loading..." text markup with a fullscreen fixed container featuring centered spinner animation and styled text. Added full-viewport positioning, background color, and z-index layering for better visual presentation.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 Hops with glee around the spinning wheel,
A loading screen now has such great appeal!
Fixed and centered, with a spinner so bright,
Users wait kindly through the loading's soft light. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely summarizes the main change: adding a spinning animation to the loading page.
Description check	✅ Passed	The description covers the Related Issue (#152), Changes Introduced section, and includes before/after screenshots. However, it lacks several required sections like Why This Change, Testing, Documentation Updates, and Checklist.
Linked Issues check	✅ Passed	The PR fulfills the core requirement from issue #152 by replacing the plain text loading screen with a spinning animation component centered on the page.
Out of Scope Changes check	✅ Passed	The changes are limited to the LoadingScreen.js component and directly address the objective of adding a spinning animation to replace the plain text loading screen.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/Components/common/LoadingScreen.js`:
- Around line 4-6: Update the LoadingScreen component's root container div to
include accessibility attributes role="status" aria-live="polite" and
aria-busy="true", change the spinner element's class from "animate-spin" to
"motion-safe:animate-spin" to respect reduced-motion preferences, and add
aria-hidden="true" to the spinner div so only the container is announced; modify
the elements referenced as the outer container div and the spinner div in
LoadingScreen.js accordingly.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Add loading ARIA semantics and honor reduced‑motion.

Screen readers won’t announce the loading state, and animate-spin ignores reduced‑motion preferences. Add role="status" aria-live="polite" aria-busy="true" on the container, and switch to motion-safe:animate-spin with aria-hidden on the spinner.

Suggested fix

-  <div className="fixed inset-0 bg-[`#FDFAE2`] flex flex-col items-center justify-center z-50">
-    <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-black mb-4"></div>
+  <div
+    className="fixed inset-0 bg-[`#FDFAE2`] flex flex-col items-center justify-center z-50"
+    role="status"
+    aria-live="polite"
+    aria-busy="true"
+  >
+    <div
+      className="motion-safe:animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-black mb-4"
+      aria-hidden="true"
+    ></div>
     <div className="text-xl font-semibold text-black">Loading...</div>
   </div>

📝 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

	<div className="fixed inset-0 bg-[#FDFAE2] flex flex-col items-center justify-center z-50">
	<div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-black mb-4"></div>
	<div className="text-xl font-semibold text-black">Loading...</div>
	<div
	className="fixed inset-0 bg-[`#FDFAE2`] flex flex-col items-center justify-center z-50"
	role="status"
	aria-live="polite"
	aria-busy="true"
	>
	<div
	className="motion-safe:animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-black mb-4"
	aria-hidden="true"
	></div>
	<div className="text-xl font-semibold text-black">Loading...</div>
	</div>

🤖 Prompt for AI Agents

In `@frontend/src/Components/common/LoadingScreen.js` around lines 4 - 6, Update
the LoadingScreen component's root container div to include accessibility
attributes role="status" aria-live="polite" and aria-busy="true", change the
spinner element's class from "animate-spin" to "motion-safe:animate-spin" to
respect reduced-motion preferences, and add aria-hidden="true" to the spinner
div so only the container is announced; modify the elements referenced as the
outer container div and the spinner div in LoadingScreen.js accordingly.