Add Custom Page Transition Loading Screen

[hardik-xi11]

User description

PR Type

Enhancement

PR Description:

• Added a loading screen replacing the old one which was using the DotLottieReact
• New loading screen using the existing packages and dependencies:
• Aurora bg
• Container Box
• framer motion

🎯 Summary

Implemented an animated loading screen for page transitions using only the existing packages and dependencies.

• Adding a Page Transition component that can be used anywhere in the app by importing it from the components folder

Changes Made.

• [ x ] Added a new feature
• [ x ] Refactored existing code

Detailed Changes

Before

After

asHelp-final.mp4

• Included placeholder text to dynamically show while loading the page
• A Page Transition component that can be used anywhere loading is necessary

---

Related Issue(s)

Resolves #7

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

PR Compliance Guide 🔍

(Compliance updated until commit 01b2f02)

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Overlay interaction leak Description: The loading overlay uses a lower z-index container (Aurora at z-0) and no explicit high z-index for the foreground, which may allow interactive page content to remain focusable/clickable beneath the overlay, potentially causing clickjacking-like interactions and accessibility traps. PageTransition.tsx [18-41] Referred Code <div className="fixed inset-0 z-0"> <Aurora colorStops={["#3A29FF", "#FF94B4", "#FF3232"]} blend={0.5} amplitude={1.0} speed={0.5} /> </div> <div className="relative flex h-screen justify-center items-center gap-6"> <motion.div initial={{ opacity: 0, y: 250 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, delay: 0.2 }} className="bg-transparent rounded-full p-8 text-cyan-800/75 text-5xl font-extrabold tracking-wider" > <ContainerTextFlip words={["Sharpening pencils", "Making a todo", "Fetching Assignment sheets", "Almost there"]} className="text-xl xs:text-xl sm:text-2xl md:text-4xl ml-1 whitespace-nowrap backdrop-blur-xl" /> </motion.div> ... (clipped 3 lines)
Ticket Compliance
🟡	🎫 #16 🟢 Replace the prior Lottie-based loading overlay with a custom animated loading experience for page transitions. Use only existing dependencies such as framer-motion, Aurora background, and ContainerTextFlip; do not add new packages. Show dynamic placeholder/loading text during transitions to indicate progress. Apply the loading screen consistently across key pages like home and dashboard without breaking navigation or layout. Ensure the visual style matches current design language with aurora background, smooth motion, and readable typography. Deliver a reusable LoadingScreen component replacing DotLottieReact usage. Use Aurora as the full-screen animated backdrop during loading. Use framer-motion for smooth entry/exit animations. Display rotating loading phrases via ContainerTextFlip while loading. Integrate LoadingScreen with existing isLoading state on pages, preserving layout and accessibility. ⚪ Visual polish aligns with design language across devices and accessibility (focus management, screen reader announcements) needs manual validation.
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.
Update

Compliance status legend

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

---

Previous compliance checks

Compliance check up to commit 01b2f02

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided
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.
Update

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

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Centralize the duplicated, timer-based loading logic The loading state logic is duplicated across page components and uses a fixed timer. It should be centralized into a custom hook or layout component and triggered by actual navigation events. Examples: src/app/dashboard/page.tsx [11-25] const [isLoading, setIsLoading] = useState(true); const [mounted, setMounted] = useState(false); const router = useRouter(); useEffect(() => { setMounted(true); }, []); useEffect(() => { if (!mounted) return; ... (clipped 5 lines) src/app/page.tsx [23-38] const [isLoading, setIsLoading] = useState(true); const [mounted, setMounted] = useState(false); const router = useRouter(); useEffect(() => { setMounted(true); const handleScroll = () => setScrollY(window.scrollY); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); ... (clipped 6 lines) Solution Walkthrough: Before: // In dashboard/page.tsx and page.tsx const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Artificial 4-second delay const timer = setTimeout(() => { setIsLoading(false); }, 4000); return () => clearTimeout(timer); }, []); return ( <div> {isLoading && <LoadingScreen />} {/* Page content */} </div> ); After: // In a custom hook, e.g., usePageLoading.ts function usePageLoading() { const [isLoading, setIsLoading] = useState(false); // ... logic to listen to router events ... // on 'routeChangeStart' => setIsLoading(true) // on 'routeChangeComplete' => setIsLoading(false) return isLoading; } // In a shared layout component function RootLayout({ children }) { const isLoading = usePageLoading(); return ( <body> {isLoading && <LoadingScreen />} {children} </body> ); } Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies duplicated state management and a fixed-timer anti-pattern across multiple pages, proposing a significant architectural improvement for scalability and user experience.	Medium
Possible issue	✅ Fix loading screen overlay positioning Suggestion Impact: The commit refactored the LoadingScreen to use a fixed, full-screen container (fixed top-0 left-0 ... h-screen w-full ...) that centers content, effectively implementing the overlay behavior suggested. code diff: + <div className="fixed top-0 left-0 black-grid-background z-[9999] flex h-screen min-h-screen w-full items-center justify-center font-sans"> {/* you can change background here*/ } + <div className="rounded-2xl bg-black pb-12 px-12 sm:scale-100 scale-70"> + <div className="flex h-10 justify-center items-center rounded-lg p-1 font-medium text-zinc-400 text-6xl "> + <p className="translate-y-5">loading</p> + <div className="words-fade relative h-full overflow-hidden translate-y-4 py-8"> + {loadingWords.map((word, index) => ( + <span className="animate-spin-words block h-full pl-[12px] translate-y-2 py-8 text-[#956afa]" key={index}> + {word} + </span> + ))} </div> - </> - ) + </div> + </div> + </div> + </> Wrap the LoadingScreen component's content in a single fixed positioned container to ensure it acts as a proper overlay without causing layout shifts. src/components/PageTransition.tsx [17-40] -<> - <div className="fixed inset-0 z-0"> - <Aurora - colorStops={["#3A29FF", "#FF94B4", "#FF3232"]} - blend={0.5} - amplitude={1.0} - speed={0.5} - /> - </div> - <div className="relative flex h-screen justify-center items-center gap-6"> +<div className="fixed inset-0 z-50 flex justify-center items-center"> + <div className="absolute inset-0"> + <Aurora + colorStops={["#3A29FF", "#FF94B4", "#FF3232"]} + blend={0.5} + amplitude={1.0} + speed={0.5} + /> + </div> + <motion.div + initial={{ opacity: 0, y: 250 }} + animate={{ opacity: 1, y: 0 }} + transition={{ duration: 0.7, delay: 0.2 }} + className="relative bg-transparent rounded-full p-8 text-cyan-800/75 text-5xl font-extrabold tracking-wider" + > + <ContainerTextFlip + words={["Sharpening pencils", "Making a todo", "Fetching Assignment sheets", "Almost there"]} + className="text-xl xs:text-xl sm:text-2xl md:text-4xl ml-1 whitespace-nowrap backdrop-blur-xl" + /> + </motion.div> +</div> - <motion.div - initial={{ opacity: 0, y: 250 }} - animate={{ opacity: 1, y: 0 }} - transition={{ duration: 0.7, delay: 0.2 }} - className="bg-transparent rounded-full p-8 text-cyan-800/75 text-5xl font-extrabold tracking-wider" - > - <ContainerTextFlip - words={["Sharpening pencils", "Making a todo", "Fetching Assignment sheets", "Almost there"]} - className="text-xl xs:text-xl sm:text-2xl md:text-4xl ml-1 whitespace-nowrap backdrop-blur-xl" - /> - </motion.div> - </div> - </> - [Suggestion processed] Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a layout bug in the new LoadingScreen component where a relative positioned element would disrupt the page flow, and provides a correct fix by wrapping it in a fixed overlay container.	Medium
Update

[kris70lesgo]

@Hardik-Kumar0005 the animation is basic can u add soemthing like this https://uiverse.io/kennyotsu/fresh-lizard-20
and also add the suggestions by qodo-merge bot

[hardik-xi11]

@Hardik-Kumar0005 the animation is basic can u add soemthing like this https://uiverse.io/kennyotsu/fresh-lizard-20 and also add the suggestions by qodo-merge bot

the text component is animated similar to the reference you sent
it wasn't clear in the animation so i am attaching a video demo of the same

i7_asHelp_pageTransition.mp4

[kris70lesgo]

@Hardik-Kumar0005 the requirement is of the exact same type of animation , can u do that ?

[hardik-xi11]

@Hardik-Kumar0005 the requirement is of the exact same type of animation , can u do that ?

do you want this type of background or should i use the same background which is used in the landing page

asHelp-test.mp4

[kris70lesgo]

this type of background is good(the grid one) remove the black background around text

while transitioning it glitches(u can see the white bg which also appears while transitioning )
can u make this transition smooth ?

[hardik-xi11]

this type of background is good(the grid one) remove the black background around text while transitioning it glitches(u can see the white bg which also appears while transitioning ) can u make this transition smooth ?

pushed the changes with all the improvements and fixes

asHelp-final.mp4

[kris70lesgo]

@Hardik-Kumar0005 just add in the text like loading assignments,modules,forms
and before merging i will be waiting for other to complete so i can compare
Thanks for contributing

[hardik-xi11]

@kris70lesgo I had already updated the pr and made the animation exactly like you asked (check the video demo in the orginal PR message). I have added the specific words as well as you asked you can check the latest commit. Please review the PR and also add the hacktober fest labels as well
Thank You!

[kris70lesgo]

@Hardik-Kumar0005 Thank u for contributing ur pr is now accpeted in hacktoberfest u can check