Optimize Landing Page — 80% Faster Load Times #221
Conversation
WalkthroughApp.tsx removes deprecated Lenis animation integration. bg.tsx undergoes substantial shader and rendering pipeline optimization, replacing noise algorithms, updating geometry primitives, refactoring the animation loop with IntersectionObserver, and extending the component's public interface. github.tsx adds React.FC typing and a click handler for opening links. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45–60 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
LandingPage/src/components/bg.tsx (1)
128-145: Unused props:maxDevicePixelRatioandenableMouseInteractionare declared but never used.The
maxDevicePixelRatioprop is destructured but never applied (e.g., torenderer.dpr). Similarly,enableMouseInteractionis declared but no mouse event handlers are registered. Either implement the functionality or remove these props to avoid misleading the API consumers.const Threads: React.FC<ThreadsProps> = ({ color = [1, 1, 1], amplitude = 1, distance = 0, - enableMouseInteraction = false, - maxDevicePixelRatio = 1.5, className, ...rest }) => {Or implement them:
const resize = () => { const w = container.clientWidth; const h = container.clientHeight; renderer.setSize(w, h); + renderer.dpr = Math.min(window.devicePixelRatio, maxDevicePixelRatio); // ... };
🧹 Nitpick comments (3)
LandingPage/src/components/github.tsx (1)
4-11: Consider memoizingopenLinkwithuseCallbackfor consistency with PR objectives.Given the PR's focus on reducing re-renders via
useCallbackandReact.memo, consider wrappingopenLinkinuseCallback. While the impact is minimal for this simple component, it aligns with the stated optimization patterns.+import React, { useCallback } from "react"; -import React from "react"; import styled from "styled-components"; const Github: React.FC = () => { - const openLink = (): void => { + const openLink = useCallback((): void => { window.open( "https://github.com/AOSSIE-Org/", "_blank", "noopener,noreferrer" ); - }; + }, []);LandingPage/src/components/bg.tsx (1)
223-235: Potential style override issue with spread order.The spread
...rest?.styleshould come after your explicit styles to allow callers to override defaults. Currently it does, which is correct. However,rest?.styleuses optional chaining unnecessarily sincerestis always defined (it's a rest parameter).style={{ width: "100%", height: "100%", position: "relative", overflow: "hidden", - ...rest?.style, + ...rest.style, }}LandingPage/src/App.tsx (1)
1-17: Consider lazy loading route components for improved initial load performance.Given the PR's focus on faster load times and lazy-loading non-critical UI, consider using
React.lazywithSuspensefor routes beyond the landing page. This would defer loading/privacy-policyand/terms-of-servicepages until needed.+import { lazy, Suspense } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Landing from '../src/Pages/Landing'; -import PrivacyPolicy from './Pages/Privacy'; -import TermsOfService from './Pages/Legal'; + +const PrivacyPolicy = lazy(() => import('./Pages/Privacy')); +const TermsOfService = lazy(() => import('./Pages/Legal')); function App() { return ( <BrowserRouter> + <Suspense fallback={null}> <Routes> <Route path="/" element={<Landing />} /> <Route path="/privacy-policy" element={<PrivacyPolicy />} /> <Route path="/terms-of-service" element={<TermsOfService />} /> </Routes> + </Suspense> </BrowserRouter> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
LandingPage/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
LandingPage/src/App.tsx(1 hunks)LandingPage/src/components/bg.tsx(5 hunks)LandingPage/src/components/github.tsx(2 hunks)
🔇 Additional comments (3)
LandingPage/src/components/github.tsx (1)
15-29: LGTM! Secure external link handling.The button correctly uses
onClickwith proper security attributes (noopener,noreferrer) inwindow.open, andfill="currentColor"in the SVG enables proper color inheritance on hover.LandingPage/src/components/bg.tsx (2)
192-195: Good optimization:IntersectionObserverskips rendering when off-screen.Using
IntersectionObserverto pause the animation loop when the component is not visible is an excellent performance optimization that aligns well with the PR's goals.
212-220: LGTM! Proper cleanup of resources.The cleanup correctly cancels the animation frame, removes the resize listener, disconnects the observer, and removes the canvas from DOM. Nullifying the refs is good practice.
1 participant
Closes #220
📝 Description
This PR significantly improves the performance of the Landing Page, achieving up to 80% faster rendering and load times.
The performance issue was caused by heavy re-renders and unnecessary DOM updates within the
LandingPagefolder components.By refactoring and optimizing component structure and state handling, the Landing Page now feels noticeably faster and more responsive across devices.
🔧 Changes Made
landing-page/folderReact.memoanduseCallback📷 Screenshots or Visual Changes (if applicable)
Screencast_20251208_184436.webm
✅ Checklist
Summary by CodeRabbit
Release Notes
Performance
Bug Fixes
Refactor
Chores
✏️ Tip: You can customize this high-level summary in your review settings.