Chore: reduce JS on First Load

apps/next-app/.eslintrc.json

@@ -11,7 +11,8 @@
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@next/next/no-html-link-for-pages": ["error", "apps/next-app/pages"]
+        "@next/next/no-html-link-for-pages": ["error", "apps/next-app/pages"],
+        "@nrwl/nx/enforce-module-boundaries": ["off"]
       }
     },
     {

apps/next-app/pages/_app.page.tsx

@@ -1,11 +1,11 @@
 import React, { StrictMode } from "react";
+import { default as dynamic } from "next/dynamic";
 import { default as Head } from "next/head";
-import { NoSsr } from "@mui/base";
 import { CssBaseline, CssVarsProvider } from "@mui/joy";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { AnalyticsProvider } from "@chair-flight/react/analytics";
-import { StopResizeAnimation, Toaster } from "@chair-flight/react/components";
-import { AppTransition, theme } from "@chair-flight/react/containers";
+import { StopResizeAnimation } from "@chair-flight/react/components";
+import { theme } from "@chair-flight/react/containers";
 import { trpc } from "@chair-flight/trpc/client";
 import type { DefaultColorScheme } from "@mui/joy/styles/types";
 import type { AppProps } from "next/app";
@@ -16,6 +16,16 @@ if (typeof document === "undefined") {
   React.useLayoutEffect = React.useEffect;
 }
 
+const DynamicToaster = dynamic(
+  () => import("@chair-flight/react/components").then((m) => m.Toaster),
+  { loading: () => null, ssr: false },
+);
+
+const DynamicAppTransition = dynamic(
+  () => import("@chair-flight/react/containers").then((m) => m.AppTransition),
+  { loading: () => null, ssr: false },
+);
+
 const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
   return (
     <StrictMode>
@@ -32,10 +42,8 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
           <CssBaseline />
           <StopResizeAnimation />
           <Component {...pageProps} />
-          <NoSsr>
-            <AppTransition />
-            <Toaster />
-          </NoSsr>
+          <DynamicToaster />
+          <DynamicAppTransition />
         </CssVarsProvider>
       </AnalyticsProvider>
     </StrictMode>

libs/react/analytics/src/use-analytics.tsx

@@ -1,5 +1,4 @@
-import { createContext, useContext, useState } from "react";
-import { default as Analytics } from "analytics";
+import { createContext, useContext, useEffect, useState } from "react";
 import { useAnalyticsPlugin } from "./use-analytics-plugin";
 import type {
   TrackEventName,
@@ -8,21 +7,27 @@ import type {
 import type { AnalyticsInstance } from "analytics";
 import type { FunctionComponent, PropsWithChildren } from "react";
 
-const analyticsContext = createContext<AnalyticsInstance>(
-  null as unknown as AnalyticsInstance,
-);
+const analyticsContext = createContext<AnalyticsInstance | null>(null);
 
 export const AnalyticsProvider: FunctionComponent<PropsWithChildren> = ({
   children,
 }) => {
   const plugin = useAnalyticsPlugin();
-  const [analytics] = useState(() =>
-    Analytics({
-      app: "chair-flight",
-      version: "1",
-      plugins: [plugin],
-    }),
-  );
+  const [analytics, setAnalytics] = useState<AnalyticsInstance | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      const Analytics = (await import("analytics")).default;
+      setAnalytics(
+        Analytics({
+          app: "chair-flight",
+          version: "1",
+          plugins: [plugin],
+        }),
+      );
+    })();
+  }, [plugin]);
+
   return (
     <analyticsContext.Provider value={analytics}>
       {children}
@@ -35,14 +40,14 @@ export const useAnalytics = () => {
 
   return {
     page: () => {
-      analytics.page();
+      analytics?.page();
     },
 
     track: <T extends TrackEventName>(
       name: T,
       payload: TrackEventPayload<T> = {},
     ) => {
-      analytics.track(name, payload);
+      analytics?.track(name, payload);
     },
   };
 };