claude:chore: 1. Lazy-loaded route pages — All page imports except Home converted to React.lazy() with Suspense, cutting the main bundle from 1,371KB to 629KB

  2. Smooth scroll-to-top fix — Moved ScrollToTop out of root layout into a Lazy wrapper component (src/route/lazy.jsx) so the scroll triggers after the
  lazy page renders, not before
  3. HMR fix — Extracted Lazy/ScrollOnMount into a separate file to avoid the Fast Refresh incompatibility warning
  4. Reward claims key fix — Added index tiebreaker to the React key to handle duplicate transaction-recipient pairs

Author: kuco23

src/components/ui/rewardClaims.tsx

@@ -79,7 +79,7 @@ const RewardClaims = ({ data, isLoading, error }: {
         const symbol = C.CHAIN_SYMBOL[reward.chain]
         const txUrl = chainToTransactionUrl(reward.chain, reward.protocol, reward.transaction)
         const addrUrl = chainToAddressUrl(reward.chain, reward.protocol, reward.recipient)
-        return <div className="reward-claim-card" key={`${reward.transaction}-${reward.recipient}`}>
+        return <div className="reward-claim-card" key={`${reward.transaction}-${reward.recipient}-${i}`}>
           <div className="reward-claim-card-top">
             <img src={logo} width={28} alt={symbol} />
             <span className="reward-claim-protocol">{C.PROTOCOL_NAME[reward.protocol]}</span>

src/layout/root.tsx

@@ -9,7 +9,6 @@ import Footer from '../components/sections/footer'
 import CallToAction from '../components/sections/callToAction'
 import Preloader from '../components/ui/preloader'
 import DiscoverWalletProviders from '../components/sections/eip6963'
-import ScrollToTop from '../components/sections/scrollToTop'
 import { Tooltip } from 'react-tooltip'
 import { useEffect } from 'react'
 import { CookiesProvider } from 'react-cookie'
@@ -63,7 +62,6 @@ const RootLayout = () => {
       <ToastContainer theme='dark' position='top-left' />
       <Tooltip id="tooltip" />
       <DiscoverWalletProviders />
-      <ScrollToTop />
     </>
   )
 }

src/route/lazy.jsx

@@ -0,0 +1,21 @@
+import { Suspense, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const ScrollOnMount = () => {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+  }, [pathname]);
+  return null;
+};
+
+const Lazy = ({ children }) => (
+  <Suspense fallback={null}>
+    {children}
+    <ScrollOnMount />
+  </Suspense>
+);
+
+export default Lazy;

src/route/router.jsx

@@ -1,13 +1,16 @@
+import { lazy } from "react";
 import { createHashRouter } from "react-router-dom";
 import RootLayout from "../layout/root";
 import Home from "../pages/home";
-import Contact from "../pages/contact";
-import About from "../pages/about";
-import AvalancheValidatorProject from "../pages/protocols/avalanche-validator/page";
-import FlareValidatorProject from "../pages/protocols/flare-validator/page";
-import FlareFspProject from "../pages/protocols/flare-fsp/page";
-import SongbirdFspProject from "../pages/protocols/songbird-fsp/page";
-import Protocols from "../pages/protocols";
+import Lazy from "./lazy";
+
+const Contact = lazy(() => import("../pages/contact"));
+const About = lazy(() => import("../pages/about"));
+const Protocols = lazy(() => import("../pages/protocols"));
+const AvalancheValidatorProject = lazy(() => import("../pages/protocols/avalanche-validator/page"));
+const FlareValidatorProject = lazy(() => import("../pages/protocols/flare-validator/page"));
+const FlareFspProject = lazy(() => import("../pages/protocols/flare-fsp/page"));
+const SongbirdFspProject = lazy(() => import("../pages/protocols/songbird-fsp/page"));
 
 
 export const router = createHashRouter([
@@ -21,36 +24,32 @@ export const router = createHashRouter([
             },
             {
                 path: "/contact",
-                element: <Contact />
+                element: <Lazy><Contact /></Lazy>
             },
             {
                 path: "/about",
-                element: <About />
+                element: <Lazy><About /></Lazy>
             },
-            /* {
-                path: "/service",
-                element: <Service />
-            }, */
             {
                 path: "/protocols",
-                element: <Protocols />
+                element: <Lazy><Protocols /></Lazy>
             },
             {
                 path: "/avalanche/validator",
-                element: <AvalancheValidatorProject />
+                element: <Lazy><AvalancheValidatorProject /></Lazy>
             },
             {
                 path: "/flare/validator",
-                element: <FlareValidatorProject />
+                element: <Lazy><FlareValidatorProject /></Lazy>
             },
             {
                 path: "/flare/fsp",
-                element: <FlareFspProject />
+                element: <Lazy><FlareFspProject /></Lazy>
             },
             {
                 path: "/songbird/fsp",
-                element: <SongbirdFspProject />
+                element: <Lazy><SongbirdFspProject /></Lazy>
             }
         ]
     }
-])
+])