Issue#7

[sarthakNITT]

feature issue #7

##Summary

• Added skeleton for loading.

Screen.Recording.2025-10-07.at.1.13.39.AM.mov

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

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Disabled authentication Description: Supabase client initialization is commented out, which may disable authentication/authorization and inadvertently expose unauthenticated routes or features if the app assumes auth is active. supabaseclient.ts [1-7] Referred Code // import { createClient } from '@supabase/supabase-js' // // You can use environment variables for safety // const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string // const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string // export const supabase = createClient(supabaseUrl, supabaseAnonKey)
Ticket Compliance
🟡	🎫 #7 🟢 Replace the Lottie-based loading animation with a React-based animation or component. Ensure styling and positioning of the loading state remain fixed, centered, with a background overlay. Simplify dependencies by removing reliance on Lottie. ⚪ Visually confirm the skeleton loading screen matches the previous design expectations and looks correct across screen sizes and dark theme.
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

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

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Create reusable skeleton loader components Refactor the monolithic skeleton loader into smaller, reusable components (e.g., NavbarSkeleton, HeroSkeleton). This will improve modularity and make the code easier to maintain. Examples: src/app/page.tsx [49-107] <div className="fixed inset-0 z-50 flex flex-col bg-slate-900 overflow-y-auto skeleton-animation"> {/* Navbar Skeleton */} <div className="w-full flex items-center justify-between px-6 py-4 border-b border-gray-800"> <div className="h-6 w-32 bg-gray-700 rounded"></div> <div className="flex gap-4"> <div className="h-5 w-16 bg-gray-700 rounded"></div> <div className="h-5 w-16 bg-gray-700 rounded"></div> <div className="h-5 w-16 bg-gray-700 rounded"></div> </div> <div className="h-8 w-20 bg-gray-700 rounded-full"></div> ... (clipped 49 lines) Solution Walkthrough: Before: export default function BackgroundBoxesDemo() { // ... return ( <div> {isLoading ? ( <div className="skeleton-animation"> {/* Navbar Skeleton */} <div ...>...</div> {/* Hero Section Skeleton */} <div ...>...</div> {/* 3 Steps Section Skeleton */} <div ...>...</div> {/* ... and so on for other sections */} </div> ) : ( <> <NavbarDemo /> {/* ... actual page content */} </> )} </div> ); } After: // In new files like `components/skeletons/NavbarSkeleton.tsx`, etc. const PageSkeleton = () => ( <div className="skeleton-animation"> <NavbarSkeleton /> <HeroSkeleton /> <StepsSkeleton /> <TestimonialsSkeleton /> <FooterSkeleton /> </div> ); export default function BackgroundBoxesDemo() { // ... return ( <div> {isLoading ? <PageSkeleton /> : <ActualPageContent />} </div> ); } Suggestion importance[1-10]: 8 __ Why: This is a significant architectural suggestion that correctly identifies a maintainability issue; refactoring the monolithic skeleton into reusable components would greatly improve code structure and long-term upkeep.	Medium
General	Use stable keys for list rendering Replace the array index with a stable, unique value for the key prop in the .map() function to align with React best practices. src/app/page.tsx [84-93] -{[1, 2, 3].map((_, i) => ( - <div key={i} className="flex items-start gap-4 w-full md:w-1/3"> +{[1, 2, 3].map((step) => ( + <div key={`skeleton-step-${step}`} className="flex items-start gap-4 w-full md:w-1/3"> <div className="w-16 h-16 bg-gray-700 rounded-full shrink-0"></div> <div className="flex flex-col gap-2"> <div className="h-5 w-40 bg-gray-700 rounded"></div> <div className="h-4 w-56 bg-gray-700 rounded"></div> <div className="h-4 w-48 bg-gray-700 rounded"></div> </div> </div> ))} Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion correctly points out the use of an index as a key, which is a React anti-pattern. While the list is static and the risk is minimal, using a more stable key is a good practice for code quality and maintainability.	Low
Update

[kris70lesgo]

@sarthakNITT can u apply the suggestions requested by qodo merge bot and please check it works fine in other pages also
Thanks for contributing

[sarthakNITT]

@kris70lesgo okay I’ll apply changes and give pr by EOD.

[sarthakNITT]

@kris70lesgo I have applied changes. Please review it now.

[sarthakNITT]

@kris70lesgo any update?

[kris70lesgo]

i have added labels of hacktoberfest it will make ur pr accepted in hacktoberfest if that helps
it will take some time sorry for the delay