From b6c9fda1f9eab5bfaf399d61dc862f53c39c9054 Mon Sep 17 00:00:00 2001 From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com> Date: Tue, 27 Aug 2024 07:45:21 -0400 Subject: [PATCH 1/3] chore(BAT): temporarily redirect landing page (#1331) Temporarily redirect BAT offer until discounts have been discussed in depth --- src/App.tsx | 9 +++++++-- .../BasicAttentionTokenLandingPage.tsx | 15 +++++++++++++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 663d10109..d4e60e19d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,8 +19,8 @@ import { LandingPage } from "@/auth/views/LandingPage"; import { BraveAdsContactFrame } from "@/auth/registration/BraveAdsContactFrame"; import { useMatomo } from "@jonkoops/matomo-tracker-react"; import { SearchLandingPage } from "@/search/SearchLandingPage"; -import { BasicAttentionTokenLandingPage } from "@/basic-attention-token/BasicAttentionTokenLandingPage"; import { SearchPreviewPage } from "./search/preview/SearchPreviewPage"; +import { BasicAttentionTokenLandingPage } from "@/basic-attention-token/BasicAttentionTokenLandingPage"; export function App() { const { enableLinkTracking } = useMatomo(); @@ -46,7 +46,12 @@ export function App() { - + ( + + )} + /> diff --git a/src/basic-attention-token/BasicAttentionTokenLandingPage.tsx b/src/basic-attention-token/BasicAttentionTokenLandingPage.tsx index a867854ec..05a4fb0bf 100644 --- a/src/basic-attention-token/BasicAttentionTokenLandingPage.tsx +++ b/src/basic-attention-token/BasicAttentionTokenLandingPage.tsx @@ -3,7 +3,7 @@ import { useTrackMatomoPageView, } from "@/hooks/useTrackWithMatomo"; import { Box, Button, Link, Stack, Typography } from "@mui/material"; -import { Link as RouterLink } from "react-router-dom"; +import { Link as RouterLink, Redirect } from "react-router-dom"; import { Trans } from "@lingui/macro"; import basicattentiontoken from "@/assets/images/basic-attention-token.svg"; import { LandingPageAppBar } from "@/components/AppBar/LandingPageAppBar"; @@ -11,10 +11,21 @@ import { Background } from "@/components/Background/Background"; import { BottomSwoop } from "@/components/Assets/BottomSwoop"; import { TopSwoop } from "@/components/Assets/TopSwoop"; -export function BasicAttentionTokenLandingPage() { +interface Props { + reroute: boolean; +} + +export function BasicAttentionTokenLandingPage({ reroute }: Props) { useTrackMatomoPageView({ documentTitle: "Basic Attention Token Landing Page", }); + + if (reroute) { + // Not fully removing page (2024-08-23), but discounts need further evaluation + window.open("https://basicattentiontoken.org/", "_blank", "noopener"); + return ; + } + return ( From e50001ae2c73cc536a13cc828ffc43f19bd9c9e1 Mon Sep 17 00:00:00 2001 From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com> Date: Tue, 27 Aug 2024 07:56:44 -0400 Subject: [PATCH 2/3] chore(performance): lazy load and code split certain libraries (#1332) Attempt to load some things more async so that performance on first page land is optimized --- src/App.tsx | 23 ++++++++++++----------- src/auth/registration/Register.tsx | 2 +- src/auth/views/Login.tsx | 2 +- src/auth/views/MagicLink.tsx | 2 +- src/search/SearchLandingPage.tsx | 2 +- src/search/preview/SearchPreviewPage.tsx | 2 +- src/user/User.tsx | 2 +- vite.config.mts | 13 +++++++++++++ 8 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d4e60e19d..819c54f72 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,8 @@ -import { useState } from "react"; +import { useState, lazy } from "react"; import { Redirect, Route, Switch } from "react-router-dom"; import { DraftContext, getAllDrafts } from "@/state/context"; -import { User } from "@/user/User"; import { CssBaseline, StyledEngineProvider, @@ -12,16 +11,18 @@ import { import { theme } from "./theme"; import { CampaignForm } from "@/user/views/adsManager/types"; import { AuthVerify } from "@/auth/views/AuthVerify"; -import { Login } from "@/auth/views/Login"; -import { MagicLink } from "@/auth/views/MagicLink"; -import { Register } from "@/auth/registration/Register"; import { LandingPage } from "@/auth/views/LandingPage"; import { BraveAdsContactFrame } from "@/auth/registration/BraveAdsContactFrame"; import { useMatomo } from "@jonkoops/matomo-tracker-react"; -import { SearchLandingPage } from "@/search/SearchLandingPage"; -import { SearchPreviewPage } from "./search/preview/SearchPreviewPage"; import { BasicAttentionTokenLandingPage } from "@/basic-attention-token/BasicAttentionTokenLandingPage"; +const UserView = lazy(() => import("@/user/User")); +const SearchPreview = lazy(() => import("@/search/preview/SearchPreviewPage")); +const SignIn = lazy(() => import("@/auth/views/Login")); +const Register = lazy(() => import("@/auth/registration/Register")); +const AuthLink = lazy(() => import("@/auth/views/MagicLink")); +const SearchLandingPage = lazy(() => import("@/search/SearchLandingPage")); + export function App() { const { enableLinkTracking } = useMatomo(); const [drafts, setDrafts] = useState(getAllDrafts()); @@ -41,8 +42,8 @@ export function App() { }} > - - + + @@ -52,9 +53,9 @@ export function App() { )} /> - + - + diff --git a/src/auth/registration/Register.tsx b/src/auth/registration/Register.tsx index 75ade04e4..e517792cb 100644 --- a/src/auth/registration/Register.tsx +++ b/src/auth/registration/Register.tsx @@ -2,7 +2,7 @@ import { AdvertiserRegistered } from "@/auth/registration/AdvertiserRegistered"; import { Redirect, Route, Switch } from "react-router-dom"; import { BrowserRegister } from "@/auth/registration/BrowserRegister"; -export function Register() { +export default function Register() { return ( diff --git a/src/auth/views/Login.tsx b/src/auth/views/Login.tsx index 79897a597..c866c2678 100644 --- a/src/auth/views/Login.tsx +++ b/src/auth/views/Login.tsx @@ -8,7 +8,7 @@ import { useTrackWithMatomo } from "@/hooks/useTrackWithMatomo"; import { Trans, msg } from "@lingui/macro"; import { useLingui } from "@lingui/react"; -export function Login() { +export default function Login() { const { trackMatomoEvent } = useTrackWithMatomo({ documentTitle: "Password Login", }); diff --git a/src/auth/views/MagicLink.tsx b/src/auth/views/MagicLink.tsx index 449e518b5..54af8da9e 100644 --- a/src/auth/views/MagicLink.tsx +++ b/src/auth/views/MagicLink.tsx @@ -9,7 +9,7 @@ import { useTrackWithMatomo } from "@/hooks/useTrackWithMatomo"; import { msg, Trans } from "@lingui/macro"; import { useLingui } from "@lingui/react"; -export function MagicLink() { +export default function MagicLink() { const { trackMatomoEvent } = useTrackWithMatomo({ documentTitle: "Magic Link Login", }); diff --git a/src/search/SearchLandingPage.tsx b/src/search/SearchLandingPage.tsx index 6b577740a..438003758 100644 --- a/src/search/SearchLandingPage.tsx +++ b/src/search/SearchLandingPage.tsx @@ -7,7 +7,7 @@ import { SearchRegister } from "@/auth/registration/SearchRegister"; import braveSearch from "@/assets/videos/setting_up_brave_search_ads.mp4"; import { SearchTalkingPoints } from "@/search/SearchTalkingPoints"; -export function SearchLandingPage() { +export default function SearchLandingPage() { useTrackMatomoPageView({ documentTitle: "Search Landing Page" }); return ( diff --git a/src/search/preview/SearchPreviewPage.tsx b/src/search/preview/SearchPreviewPage.tsx index d195f316e..54aabf465 100644 --- a/src/search/preview/SearchPreviewPage.tsx +++ b/src/search/preview/SearchPreviewPage.tsx @@ -9,7 +9,7 @@ import { NoPreviewAvailable } from "./NoPreviewAvailable"; /* eslint-disable lingui/no-unlocalized-strings */ -export function SearchPreviewPage() { +export default function SearchPreviewPage() { const { slug } = useParams<{ slug: string }>(); const { loading, data } = useLandingPageData(slug); return ( diff --git a/src/user/User.tsx b/src/user/User.tsx index 99981f352..664490170 100644 --- a/src/user/User.tsx +++ b/src/user/User.tsx @@ -65,7 +65,7 @@ const buildApolloClient = () => { }); }; -export function User() { +export default function User() { const client = useMemo(() => buildApolloClient(), []); const [fromDate, setFromDate] = useState( dayjs().subtract(6, "month").startOf("day").toDate(), diff --git a/vite.config.mts b/vite.config.mts index fd5e6451e..3b88231a5 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -55,6 +55,19 @@ export default defineConfig(({ mode }) => { sourcemap: true, // vite automagically decides whether to inline assets depending on their size. We are explicitly disabling this. assetsInlineLimit: 0, + rollupOptions: { + output: { + manualChunks: { + lodash: ["lodash"], + highcharts: ["highcharts"], + "highcharts-react-official": ["highcharts-react-official"], + "react-dom": ["react-dom"], + forms: ["yup", "formik", "bignumber.js"], + }, + minifyInternalExports: true, + assetFileNames: "static/[name].[hash][extname]", + }, + }, }, test: { // see https://vitest.dev/config/#globals From 38864f2c765495370815e6126b37552ab0d0aa22 Mon Sep 17 00:00:00 2001 From: Ian Krieger <48930920+IanKrieger@users.noreply.github.com> Date: Tue, 27 Aug 2024 08:50:28 -0400 Subject: [PATCH 3/3] fix: wrap main component in suspense for lazy load (#1334) Getting a blank page when merging 2 PR's together. This should fix. --- src/App.tsx | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 819c54f72..e1ce06df5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,10 @@ -import { useState, lazy } from "react"; +import { useState, lazy, Suspense } from "react"; import { Redirect, Route, Switch } from "react-router-dom"; import { DraftContext, getAllDrafts } from "@/state/context"; import { + CircularProgress, CssBaseline, StyledEngineProvider, ThemeProvider, @@ -41,24 +42,26 @@ export function App() { }, }} > - - - - - - - ( - - )} - /> - - - - - - + }> + + + + + + + ( + + )} + /> + + + + + + +