perf : improves loading time

[virat-sr]

PR Type

Enhancement

---

Description

• Remove loading screens and improve initial page load performance

• Add bundle analyzer and optimize package imports

• Implement dynamic imports for better code splitting

• Enable modern image formats and React optimizations

---

Diagram Walkthrough

flowchart LR
  A["Loading Screens"] -- "Remove" --> B["Instant Page Load"]
  C["Static Imports"] -- "Convert to" --> D["Dynamic Imports"]
  E["Bundle Analyzer"] -- "Add" --> F["Performance Monitoring"]
  G["Next.js Config"] -- "Optimize" --> H["Better Performance"]

Loading

File Walkthrough

	Relevant files
Configuration changes	next.config.ts Configure Next.js performance optimizations                            next.config.ts Add bundle analyzer for performance monitoring Enable React strict mode and SWC minification Configure package import optimization for lucide-react and @lottiefiles/dotlottie-react Enable modern image formats (AVIF, WebP) +12/-2
Dependencies	package.json Add bundle analyzer dependency                                                      package.json Add @next/bundle-analyzer dependency for bundle analysis +1/-0
Enhancement	page.tsx Remove loading screen from dashboard                                          src/app/dashboard/page.tsx Remove loading state management and 4-second loading screen Remove mounted state checks and related useEffect hooks Eliminate DotLottie loading animation component +4/-29    page.tsx Optimize main page with dynamic imports                                    src/app/page.tsx Convert static imports to dynamic imports for better code splitting Remove loading screen and replace with idle callback optimization Optimize scroll event handling with requestAnimationFrame Replace img tag with Next.js Image component +64/-49  page.tsx Remove loading screen from sign page                                          src/app/sign/page.tsx Remove loading screen and DotLottie loading animation Simplify component rendering without loading states +2/-14

---

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

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Browser API misuse Description: The code uses window.requestIdleCallback with a cast to any and cancellation via cancelIdleCallback without feature detection on cleanup, risking runtime errors in browsers lacking cancelIdleCallback; guard both call and cancel with proper availability checks. page.tsx [35-39] Referred Code const id = ('requestIdleCallback' in window) ? (window as any).requestIdleCallback(() => setReady(true)) : setTimeout(() => setReady(true), 150); return () => (window as any).cancelIdleCallback ? (window as any).cancelIdleCallback(id) : clearTimeout(id); }, []);
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
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
Possible issue	Fix incorrect effect cleanup logic Refactor the useEffect hook to ensure the correct cleanup function (cancelIdleCallback or clearTimeout) is used based on whether requestIdleCallback or setTimeout was called. src/app/page.tsx [34-39] useEffect(() => { - const id = ('requestIdleCallback' in window) - ? (window as any).requestIdleCallback(() => setReady(true)) - : setTimeout(() => setReady(true), 150); - return () => (window as any).cancelIdleCallback ? (window as any).cancelIdleCallback(id) : clearTimeout(id); + if ('requestIdleCallback' in window) { + const id = (window as any).requestIdleCallback(() => setReady(true)); + return () => (window as any).cancelIdleCallback(id); + } + + const id = setTimeout(() => setReady(true), 150); + return () => clearTimeout(id); }, []); Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a bug in the useEffect cleanup logic where an incorrect cancellation function could be called, leading to a potential memory leak.	Medium
High-level	The PR's premise is misleading The suggestion points out that the main performance improvement is from removing an artificial 4-second loading delay, making the PR's framing as a major optimization misleading. Examples: src/app/page.tsx [29-58] const [scrollY, setScrollY] = useState(0); // const [isLoading, setIsLoading] = useState(true); // const [mounted, setMounted] = useState(false); const router = useRouter(); const [ready, setReady] = useState(false); useEffect(() => { const id = ('requestIdleCallback' in window) ? (window as any).requestIdleCallback(() => setReady(true)) : setTimeout(() => setReady(true), 150); return () => (window as any).cancelIdleCallback ? (window as any).cancelIdleCallback(id) : clearTimeout(id); ... (clipped 20 lines) src/app/dashboard/page.tsx [10-26] const [isMenuOpen, setIsMenuOpen] = useState(false); // const [isLoading, setIsLoading] = useState(true); // const [mounted, setMounted] = useState(false); const router = useRouter(); const featuredProjects = [ { id: 1, title: "Assignment-Med", ... (clipped 7 lines) Solution Walkthrough: Before: // In multiple page components (e.g., page.tsx, dashboard/page.tsx) const [isLoading, setIsLoading] = useState(true); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); useEffect(() => { if (!mounted) return; // Artificial 4-second delay const timer = setTimeout(() => { setIsLoading(false); }, 4000); return () => clearTimeout(timer); }, [mounted]); if (isLoading) { return <LoadingScreen />; } return <PageContent />; After: // In multiple page components (e.g., page.tsx, dashboard/page.tsx) // The artificial loading state and delay are completely removed. // Components now render directly. // Other optimizations like dynamic imports are added. const Component = dynamic(() => import(...)); return ( <div> <PageContent /> <Component /> </div> ); Suggestion importance[1-10]: 6 __ Why: The suggestion accurately identifies that the most significant performance gain is from removing an artificial 4-second delay, which is a valid high-level observation about the PR's framing, though it doesn't propose a code change.	Low
More

[kris70lesgo]

@virat-sr can u send me the video showing how less is the loading time now (record running a npm command and then show the website )