feat: Add custom LoadingScreen with animated transitions

[Vasu10134]

User description

Summary

This PR(#16) replaces the previous Lottie-based loader with a reusable LoadingScreen component, providing smooth, visually appealing page transition animations using only existing dependencies.

Changes / Additions

• Removed DotLottieReact and prior Lottie loader references.
• Added LoadingScreen component with:
  • Full-screen Aurora background.
  • Smooth fade/slide animations using framer-motion.
  • Dynamic rotating loading messages via ContainerTextFlip.
• Integrated LoadingScreen on key pages (Home, Dashboard) using isLoading state.
• Maintained layout, accessibility, and navigation during loading.
• Improved perceived load time and visual consistency with existing design language.

Impact

• Users now experience smooth animated transitions instead of the previous static Lottie animation.
• Centralizes loader logic, simplifying future page-loading enhancements.

Images Attached

---

PR Type

Enhancement

---

Description

• Replace Lottie-based loader with custom LoadingScreen component

• Add animated transitions using framer-motion and Aurora background

• Integrate dynamic loading messages with ContainerTextFlip

• Refactor dashboard and home page loading states

---

Diagram Walkthrough

flowchart LR
  A["Old Lottie Loader"] --> B["Remove DotLottieReact"]
  B --> C["Create LoadingScreen Component"]
  C --> D["Add Aurora Background"]
  C --> E["Add ContainerTextFlip Messages"]
  D --> F["Integrate in Dashboard"]
  E --> F
  F --> G["Integrate in Home Page"]
  G --> H["Enhanced User Experience"]

Loading

File Walkthrough

Relevant files

Enhancement

page.tsx Dashboard loading state refactor                                                  src/app/dashboard/page.tsx Remove old Lottie loader references and imports Simplify loading state management with 4-second timer Replace skeleton loader with AcademicHubSkeleton Refactor project data structure and component layout +133/-218 page.tsx Home page loading enhancement                                                        src/app/page.tsx Add LoadingScreen component import and integration Replace old loading logic with new skeleton system Enhance hero section with motion animations Improve responsive layout and component structure +65/-87  LoadingScreen.tsx New LoadingScreen component creation                                          src/components/LoadingScreen.tsx Create new reusable loading screen component Implement full-screen Aurora background Add dynamic rotating messages with ContainerTextFlip Include smooth fade/slide animations with framer-motion +50/-0    dashboardPageSkeleton.tsx Dashboard skeleton component update                                            src/components/skeletons/dashboardPageSkeleton.tsx Rename from AcademicHubSkeleton to DashboardPageSkeleton Add ContainerTextFlip for dynamic loading messages Simplify skeleton structure and improve animations Update component layout and styling +34/-74  homePageSkeleton.tsx Home page skeleton enhancement                                                      src/components/skeletons/homePageSkeleton.tsx Add ContainerTextFlip for rotating loading messages Clean up component structure and imports Improve skeleton animations and layout Enhance user feedback during loading +13/-9

---

[qodo-free-for-open-source-projects]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Accessibility risk Description: The Aurora background is rendered in a fixed full-screen div without aria-hidden or role="presentation", which may trap focus/impact screen readers during loading and should be marked aria-hidden to prevent accessibility issues. page.tsx [60-67] Referred Code <div className="fixed inset-0 z-0 pointer-events-none"> <Aurora colorStops={["#3A29FF", "#FF94B4", "#FF3232"]} blend={0.5} amplitude={1.0} speed={0.5} /> </div>
	Accessibility risk Description: The full-screen loading overlay lacks aria-live or role attributes and may not be dismissible via keyboard, potentially causing an accessibility issue if focus is trapped during loading. LoadingScreen.tsx [24-45] Referred Code <motion.div key="loading-screen" className="fixed inset-0 z-50 flex items-center justify-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} > {/* Aurora full-screen background */} <Aurora className="absolute inset-0" /> {/* Centered dynamic loading text */} <motion.div className="relative z-10 text-white text-center text-lg font-semibold" initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -20, opacity: 0 }} transition={{ type: "spring", stiffness: 120, damping: 20 }} > <ContainerTextFlip texts={phrases} /> </motion.div> </motion.div> ... (clipped 1 lines)
Ticket Compliance
🟡	🎫 #16 🟢 Replace the prior Lottie-based loading overlay with a custom animated loading experience for page transitions. Use only existing packages/components like framer-motion, Aurora, and ContainerTextFlip; do not add new dependencies. Show dynamic placeholder/loading text during transitions to communicate progress. Ensure visual polish aligns with current design language (aurora background, smooth motion, readable typography). Deliver a reusable LoadingScreen component to replace DotLottieReact usage. Use Aurora as the full-screen animated background during loading. Use framer-motion for smooth entry/exit animations. Display rotating loading phrases via ContainerTextFlip while loading. ⚪ Apply the loading screen consistently across key pages such as home and dashboard without disrupting navigation/layout. Integrate the LoadingScreen into pages using existing isLoading state, preserving layout and accessibility.
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-free-for-open-source-projects]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Adopt a single, consistent loading strategy The PR creates a reusable LoadingScreen component but doesn't use it, instead implementing separate skeleton loaders for each page. It is suggested to either use the LoadingScreen consistently or remove it to avoid dead code and duplicated logic. Examples: src/components/LoadingScreen.tsx [1-50] "use client"; import React from "react"; import { motion, AnimatePresence } from "framer-motion"; import Aurora from "./Backgrounds/Aurora"; import { ContainerTextFlip } from "./ui/container-text-flip"; interface LoadingScreenProps { isLoading: boolean; phrases?: string[]; ... (clipped 40 lines) src/app/page.tsx [48-50] <AnimatePresence> {isLoading && <HomePageSkeleton />} </AnimatePresence> Solution Walkthrough: Before: // src/app/dashboard/page.tsx const AcademicHub = () => { const [isLoading, setIsLoading] = useState(true); // ... return ( <div> <AnimatePresence> {isLoading && <AcademicHubSkeleton />} </AnimatePresence> {/* Page content hidden while loading */} </div> ); }; // src/app/page.tsx export default function BackgroundBoxesDemo() { const [isLoading, setIsLoading] = useState(true); // ... return ( <div> <AnimatePresence> {isLoading && <HomePageSkeleton />} </AnimatePresence> {/* Page content hidden while loading */} </div> ); } After: // src/app/dashboard/page.tsx import LoadingScreen from "@/components/LoadingScreen"; const AcademicHub = () => { const [isLoading, setIsLoading] = useState(true); // ... return ( <div> <LoadingScreen isLoading={isLoading} /> <motion.div className={isLoading ? 'opacity-0' : 'opacity-100'}> {/* Page content */} </motion.div> </div> ); }; // src/app/page.tsx import LoadingScreen from "@/components/LoadingScreen"; export default function BackgroundBoxesDemo() { const [isLoading, setIsLoading] = useState(true); // ... return ( <div> <LoadingScreen isLoading={isLoading} /> <motion.div className={isLoading ? 'opacity-0' : 'opacity-100'}> {/* Page content */} </motion.div> </div> ); } Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a major architectural flaw where the PR introduces a reusable LoadingScreen but fails to use it, instead creating separate skeleton loaders, which contradicts the stated goal of centralizing loading logic.	High
Possible issue	Correct prop name for component In LoadingScreen.tsx, rename the texts prop to words on the ContainerTextFlip component to match its expected API and fix the loading message display. src/components/LoadingScreen.tsx [42] -<ContainerTextFlip texts={phrases} /> +<ContainerTextFlip words={phrases} /> Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a prop name mismatch that would cause the ContainerTextFlip component to fail, which is a clear bug in the newly added component.	Medium
	Fix conflicting animation properties Remove the conflicting Framer Motion initial and animate props from the motion.div, and rely solely on the conditional CSS classes for the fade-in animation. src/app/dashboard/page.tsx [46-50] -<motion.div +<div className={isLoading ? 'opacity-0' : 'opacity-100 transition-opacity duration-500'} - initial={{ opacity: 0 }} - animate={{ opacity: 1 }} > Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a conflict between Framer Motion props and conditional CSS classes, which can cause unpredictable animation behavior, and proposes a valid fix.	Low
More

[kris70lesgo]

@Vasu10134 i have added the labels now the pr is accepted for hacktoberfest