diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js index 060f9a0e..ec895ffd 100644 --- a/frontend/pages/_app.js +++ b/frontend/pages/_app.js @@ -6,12 +6,19 @@ import "highlight.js/styles/github.css"; import "focus-visible/dist/focus-visible"; import dynamic from "next/dynamic"; import { QueryClient, QueryClientProvider } from "react-query"; -import HeadLinks from "../src/components/HeadLinks"; -import HeadSEO from "../src/components/HeadSEO"; + +const HeadSEO = dynamic(() => import("../src/components/HeadSEO"), { + ssr: false, +}); +const HeadLinks = dynamic(() => import("../src/components/HeadLinks"), { + ssr: false, +}); const AppContext = dynamic(() => import("../src/AppContext"), { ssr: false, }); -import DefaultLayout from "../src/layouts"; +const DefaultLayout = dynamic(() => import("../src/layouts"), { + ssr: false, +}); import { useRouter } from "next/router"; import NProgress from "nprogress"; diff --git a/frontend/pages/index.js b/frontend/pages/index.js index b9ee662a..43c220ea 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -1,42 +1,84 @@ import React, { - useLayoutEffect, - useEffect, - Suspense, - useContext, useState, + useContext, + Suspense, + useEffect, + useLayoutEffect, } from "react"; import { + Fade, Flex, Heading, Box, Image as ChakraImage, Button, Center, - Fade, chakra, Stack, Link, SimpleGrid, useMediaQuery, + Grid, + GridItem, } from "@chakra-ui/react"; -import { Grid, GridItem } from "@chakra-ui/react"; -import { useUser, useAnalytics, useModals, useRouter } from "../src/core/hooks"; -import { getLayout } from "../src/layouts"; -import SplitWithImage from "../src/components/SplitWithImage"; -import ConnectedButtons from "../src/components/ConnectedButtons"; -import UIContext from "../src/core/providers/UIProvider/context"; +import dynamic from "next/dynamic"; +import useUser from "../src/core/hooks/useUser"; +import useAnalytics from "../src/core/hooks/useAnalytics"; +import useModals from "../src/core/hooks/useModals"; +import useRouter from "../src/core/hooks/useRouter"; +const SplitWithImage = dynamic( + () => import("../src/components/SplitWithImage"), + { + ssr: false, + } +); +const ConnectedButtons = dynamic( + () => import("../src/components/ConnectedButtons"), + { + ssr: false, + } +); +const UIContext = dynamic( + () => import("../src/core/providers/UIProvider/context"), + { + ssr: false, + } +); + import { MIXPANEL_PROPS } from "../src/core/providers/AnalyticsProvider/constants"; -import { FaFileContract } from "react-icons/fa"; -import { RiDashboardFill } from "react-icons/ri"; -import { - GiMeshBall, - GiLogicGateXor, - GiSuspicious, - GiHook, -} from "react-icons/gi"; -import { AiFillApi } from "react-icons/ai"; -import { BiTransfer } from "react-icons/bi"; -import { IoTelescopeSharp } from "react-icons/io5"; +const RiDashboardFill = dynamic(() => + import("react-icons/ri").then((mod) => mod.RiDashboardFill) +); +const FaFileContract = dynamic(() => + import("react-icons/fa").then((mod) => mod.FaFileContract) +); +const GiMeshBall = dynamic(() => + import("react-icons/gi").then((mod) => mod.GiMeshBall) +); + +const GiLogicGateXor = dynamic(() => + import("react-icons/gi").then((mod) => mod.GiLogicGateXor) +); + +const GiSuspicious = dynamic(() => + import("react-icons/gi").then((mod) => mod.GiSuspicious) +); + +const GiHook = dynamic(() => + import("react-icons/gi").then((mod) => mod.GiHook) +); + +const AiFillApi = dynamic(() => + import("react-icons/ai").then((mod) => mod.AiFillApi) +); + +const BiTransfer = dynamic(() => + import("react-icons/bi").then((mod) => mod.BiTransfer) +); + +const IoTelescopeSharp = dynamic(() => + import("react-icons/io5").then((mod) => mod.IoTelescopeSharp) +); const HEADING_PROPS = { fontWeight: "700", @@ -533,7 +575,4 @@ export async function getStaticProps() { }; } -Homepage.layout = "default"; -Homepage.getLayout = getLayout; - export default Homepage;