feat: dynamically load Firebase and lazy-load ChatMessage component

- Convert Firebase app and auth initialization to async with dynamic imports.
  The vendor-firebase chunk (~155KB) is now only fetched when a user
  interacts with auth (Faucet page), not eagerly on every page.
- Lazy-load ChatMessage via React.lazy() so react-markdown,
  react-syntax-highlighter, remark-gfm, and Prism language grammars
  are deferred until chat messages are actually rendered.
- Both changes reduce the initial page load for the vast majority of
  users who never use the Faucet or the chat widget.

Author: cursoragent

src/components/chat-widget/chat-dialog.tsx

@@ -2,14 +2,17 @@ import { useChatbot } from "@aptos-labs/ai-chatbot-client";
 import * as Dialog from "@radix-ui/react-dialog";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { ChevronLeft, ChevronRight, Pencil, Share2, Trash2, X } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import type { ChatInputRef } from "./chat-input";
 import { ChatInput } from "./chat-input";
-import { ChatMessage } from "./chat-message";
 import { ChatSidebar } from "./chat-sidebar";
 import { ShareModal } from "./share-modal";
 import type { Chat, ChatWidgetProps, Message } from "./types";
 
+// Lazy-load ChatMessage to defer react-markdown, react-syntax-highlighter,
+// and all Prism language grammars until a message actually needs rendering.
+const ChatMessage = lazy(() => import("./chat-message").then((m) => ({ default: m.ChatMessage })));
+
 export interface ChatDialogProps extends Omit<ChatWidgetProps, "chats"> {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -233,17 +236,19 @@ export function ChatDialog({
                             </div>
                           </div>
                         )}
-                        {convertedMessages.map((message: Message) => (
-                          <ChatMessage
-                            key={message.id}
-                            message={message}
-                            onCopy={() => onCopyMessage?.(message.id)}
-                            onFeedback={(messageId, feedback) =>
-                              onMessageFeedback?.(messageId, feedback)
-                            }
-                            className={messageClassName}
-                          />
-                        ))}
+                        <Suspense fallback={null}>
+                          {convertedMessages.map((message: Message) => (
+                            <ChatMessage
+                              key={message.id}
+                              message={message}
+                              onCopy={() => onCopyMessage?.(message.id)}
+                              onFeedback={(messageId, feedback) =>
+                                onMessageFeedback?.(messageId, feedback)
+                              }
+                              className={messageClassName}
+                            />
+                          ))}
+                        </Suspense>
                         {isGenerating && !isTyping && (
                           <div className="chat-message">
                             <div className="chat-message-content">

src/components/chat-widget/chat-message.tsx

@@ -3,7 +3,6 @@ import type React from "react";
 import { type ComponentProps, useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-import oneDark from "react-syntax-highlighter/dist/cjs/styles/prism/one-dark";
 import bashLang from "react-syntax-highlighter/dist/cjs/languages/prism/bash";
 import goLang from "react-syntax-highlighter/dist/cjs/languages/prism/go";
 import javascriptLang from "react-syntax-highlighter/dist/cjs/languages/prism/javascript";
@@ -15,8 +14,9 @@ import tomlLang from "react-syntax-highlighter/dist/cjs/languages/prism/toml";
 import tsxLang from "react-syntax-highlighter/dist/cjs/languages/prism/tsx";
 import typescriptLang from "react-syntax-highlighter/dist/cjs/languages/prism/typescript";
 import yamlLang from "react-syntax-highlighter/dist/cjs/languages/prism/yaml";
-import moveLang from "./prism-move";
+import oneDark from "react-syntax-highlighter/dist/cjs/styles/prism/one-dark";
 import remarkGfm from "remark-gfm";
+import moveLang from "./prism-move";
 import type { Message } from "./types";
 
 // CJS modules export as { default: fn }, extract the actual language function

src/components/chat-widget/prism-move.ts

@@ -8,9 +8,8 @@
  * Compatible with react-syntax-highlighter's PrismLight (refractor-based).
  */
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: Prism's refractor registration API is untyped
 function move(Prism: any) {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   Prism.languages.move = {
     comment: [
       { pattern: /\/\/\/.*/, greedy: true, alias: "doc-comment" },

src/lib/firebase/app.ts

@@ -4,19 +4,29 @@ import {
   PUBLIC_FIREBASE_AUTH_DOMAIN,
   PUBLIC_FIREBASE_PROJECT_ID,
 } from "astro:env/client";
-import { initializeApp } from "@firebase/app";
-import { singletonGetter } from "~/lib/singletonGetter";
+import type { FirebaseApp } from "@firebase/app";
 import { FirebaseError } from "./error";
 
-export const getFirebaseApp = singletonGetter(() => {
+let appInstance: FirebaseApp | null = null;
+
+/**
+ * Lazily initializes and returns the Firebase app instance.
+ * The @firebase/app module (~100KB gzipped) is dynamically imported
+ * so it is only downloaded when Firebase is actually needed.
+ */
+export async function getFirebaseApp(): Promise<FirebaseApp> {
+  if (appInstance) return appInstance;
+
   try {
-    return initializeApp({
+    const { initializeApp } = await import("@firebase/app");
+    appInstance = initializeApp({
       apiKey: PUBLIC_FIREBASE_API_KEY,
       authDomain: PUBLIC_FIREBASE_AUTH_DOMAIN,
       projectId: PUBLIC_FIREBASE_PROJECT_ID,
       appId: PUBLIC_FIREBASE_APP_ID,
     });
+    return appInstance;
   } catch (e) {
     throw new FirebaseError("Could not instantiate firebase", { cause: e });
   }
-});
+}

src/lib/firebase/auth.ts

@@ -1,6 +1,17 @@
-import { type Auth, getAuth } from "@firebase/auth";
+import type { Auth } from "@firebase/auth";
 import { getFirebaseApp } from "./app";
 
-export function getFirebaseAuth(): Auth {
-  return getAuth(getFirebaseApp());
+let authInstance: Auth | null = null;
+
+/**
+ * Lazily initializes and returns the Firebase Auth instance.
+ * The @firebase/auth module is dynamically imported so it is only
+ * downloaded when authentication is actually needed.
+ */
+export async function getFirebaseAuth(): Promise<Auth> {
+  if (authInstance) return authInstance;
+
+  const [{ getAuth }, app] = await Promise.all([import("@firebase/auth"), getFirebaseApp()]);
+  authInstance = getAuth(app);
+  return authInstance;
 }

src/stores/auth.ts

@@ -1,76 +1,88 @@
-import {
-  type AuthProvider,
-  GithubAuthProvider,
-  GoogleAuthProvider,
-  onAuthStateChanged,
-  signInWithPopup,
-  signOut,
-  type User,
-} from "@firebase/auth";
+import type { User } from "@firebase/auth";
 import { atom, onMount } from "nanostores";
 
 import { getFirebaseAuth } from "~/lib/firebase/auth";
 import { singletonGetter } from "~/lib/singletonGetter";
 
 export type { User } from "@firebase/auth";
 
+/**
+ * Lazily loads @firebase/auth providers and methods.
+ * This avoids pulling the full Firebase Auth SDK into the initial bundle --
+ * it is only fetched when the user actually interacts with auth.
+ */
+async function loadFirebaseAuth() {
+  return import("@firebase/auth");
+}
+
 export class AuthStore {
   $user = atom<User | null>(null);
   $isLoading = atom<boolean>(false);
   $error = atom<string | null>(null);
 
   constructor() {
     onMount(this.$user, () => {
-      try {
-        return onAuthStateChanged(getFirebaseAuth(), (currentUser) => {
-          this.$isLoading.set(false);
-          this.$user.set(currentUser);
-        });
-      } catch {
-        this.$error.set("Could not instantiate a connection with firebase");
-      }
-
+      void this.initAuthListener();
       return;
     });
   }
 
+  private async initAuthListener(): Promise<void> {
+    try {
+      const [{ onAuthStateChanged }, auth] = await Promise.all([
+        loadFirebaseAuth(),
+        getFirebaseAuth(),
+      ]);
+      onAuthStateChanged(auth, (currentUser) => {
+        this.$isLoading.set(false);
+        this.$user.set(currentUser);
+      });
+    } catch {
+      this.$error.set("Could not instantiate a connection with firebase");
+    }
+  }
+
   // Auth methods
   loginByGithub = (): void => {
-    this.loginByProvider(new GithubAuthProvider());
+    void this.loginByProvider("github");
   };
 
   loginByGoogle = (): void => {
-    this.loginByProvider(new GoogleAuthProvider());
+    void this.loginByProvider("google");
   };
 
   logout = (): void => {
     this.$error.set(null);
     this.$isLoading.set(true);
-    signOut(getFirebaseAuth())
-      .then(() => {
+    void (async () => {
+      try {
+        const [{ signOut }, auth] = await Promise.all([loadFirebaseAuth(), getFirebaseAuth()]);
+        await signOut(auth);
         this.$user.set(null);
-      })
-      .catch((e: unknown) => {
+      } catch (e: unknown) {
         this.$error.set(String(e));
-      })
-      .finally(() => {
+      } finally {
         this.$isLoading.set(false);
-      });
+      }
+    })();
   };
 
-  private loginByProvider(provider: AuthProvider): void {
+  private async loginByProvider(provider: "github" | "google"): Promise<void> {
     this.$error.set(null);
     this.$isLoading.set(true);
-    signInWithPopup(getFirebaseAuth(), provider)
-      .then((creds) => {
-        this.$user.set(creds.user);
-      })
-      .catch((e: unknown) => {
-        this.$error.set(String(e));
-      })
-      .finally(() => {
-        this.$isLoading.set(false);
-      });
+    try {
+      const [firebaseAuth, auth] = await Promise.all([loadFirebaseAuth(), getFirebaseAuth()]);
+      const authProvider =
+        provider === "github"
+          ? new firebaseAuth.GithubAuthProvider()
+          : new firebaseAuth.GoogleAuthProvider();
+      const creds = await firebaseAuth.signInWithPopup(auth, authProvider);
+      this.$user.set(creds.user);
+    } catch (e: unknown) {
+      this.$error.set(String(e));
+    } finally {
+      this.$isLoading.set(false);
+    }
   }
 }