Eliminate Tiptap (~500KB) from initial page load bundle

Root cause of 59s mobile FCP: Tiptap rich text editor was eagerly loaded
on every dashboard page through three import paths:

1. dashboard-layout → ActivityLogDialog → RichTextEditor → @tiptap/*
2. mobile-nav → ActivityLogDialog → same chain
3. activity-feed → RichTextViewer → rich-text.ts → @tiptap/html + StarterKit

Even RichTextViewer (just displays content) pulled in the full editor
because rich-text.ts mixed lightweight utils with heavy Tiptap imports.

Fixes:
- Dynamic import ActivityLogDialog (dialog is closed by default, no
  reason to load 500KB of editor JS eagerly)
- Dynamic import RichTextEditor in feed comments and activity detail
  (only loads when user expands comments)
- Replace Tiptap's generateHTML in RichTextViewer with a lightweight
  ~2KB JSON→HTML converter (rich-text-html.ts)
- Split rich-text.ts → rich-text-utils.ts for isEditorContentEmpty,
  MentionableUser type, and parsing functions (zero Tiptap deps)
- Update all consumer imports to use lightweight utils module

Result: Tiptap is completely absent from initial page load. It only
loads on-demand when user interacts with the editor.

https://claude.ai/code/session_012f5zvn8HuGn5waNPRYNAy2

Author: claude

apps/web/app/challenges/[id]/activities/[activityId]/activity-detail-content.tsx

@@ -26,8 +26,13 @@ import {
 } from 'lucide-react';
 
 import { ConvexError } from 'convex/values';
-import { RichTextEditor } from '@/components/editor/rich-text-editor';
+import dynamic from 'next/dynamic';
 import { RichTextViewer } from '@/components/editor/rich-text-viewer';
+
+const RichTextEditor = dynamic(
+  () => import('@/components/editor/rich-text-editor').then((mod) => ({ default: mod.RichTextEditor })),
+  { ssr: false, loading: () => <div className="min-h-[120px] w-full animate-pulse rounded-md border border-input bg-background" /> }
+);
 import { UserAvatar, UserAvatarInline } from '@/components/user-avatar';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
@@ -66,7 +71,7 @@ import {
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { useMentionableUsers } from '@/hooks/use-mentionable-users';
-import { isEditorContentEmpty, type MentionableUser } from '@/lib/rich-text';
+import { isEditorContentEmpty, type MentionableUser } from '@/lib/rich-text-utils';
 import { cn } from '@/lib/utils';
 
 interface ActivityDetailContentProps {

apps/web/components/dashboard/activity-feed.tsx

@@ -17,8 +17,13 @@ import { useMutation, usePaginatedQuery } from 'convex/react';
 import { api } from '@repo/backend';
 import type { Id } from '@repo/backend/_generated/dataModel';
 
-import { RichTextEditor } from '@/components/editor/rich-text-editor';
+import dynamic from 'next/dynamic';
 import { RichTextViewer } from '@/components/editor/rich-text-viewer';
+
+const RichTextEditor = dynamic(
+  () => import('@/components/editor/rich-text-editor').then((mod) => ({ default: mod.RichTextEditor })),
+  { ssr: false, loading: () => <div className="min-h-[120px] w-full animate-pulse rounded-md border border-input bg-background" /> }
+);
 import { useChallengeRealtime } from './challenge-realtime-context';
 import { UserAvatar, UserAvatarInline } from '@/components/user-avatar';
 import { Button } from '@/components/ui/button';
@@ -32,7 +37,7 @@ import {
 } from '@/components/ui/card';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { useMentionableUsers } from '@/hooks/use-mentionable-users';
-import { isEditorContentEmpty, type MentionableUser } from '@/lib/rich-text';
+import { isEditorContentEmpty, type MentionableUser } from '@/lib/rich-text-utils';
 import {
   Dialog,
   DialogContent,

apps/web/components/dashboard/activity-log-dialog-lazy.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { ReactNode } from "react";
+
+const ActivityLogDialog = dynamic(
+  () =>
+    import("./activity-log-dialog").then((mod) => ({
+      default: mod.ActivityLogDialog,
+    })),
+  { ssr: false }
+);
+
+interface ActivityLogDialogLazyProps {
+  challengeId: string;
+  challengeStartDate?: string;
+  trigger?: ReactNode;
+}
+
+export function ActivityLogDialogLazy(props: ActivityLogDialogLazyProps) {
+  return <ActivityLogDialog {...props} />;
+}

apps/web/components/dashboard/activity-log-dialog.tsx

@@ -37,7 +37,7 @@ import {
 } from "@/components/ui/popover";
 import { DatePicker } from "@/components/ui/date-picker";
 import { useMentionableUsers } from "@/hooks/use-mentionable-users";
-import { isEditorContentEmpty } from "@/lib/rich-text";
+import { isEditorContentEmpty } from "@/lib/rich-text-utils";
 import { cn } from "@/lib/utils";
 import { localDateToIsoNoon, formatDateOnlyFromLocalDate, formatDateShortFromDateOnly } from "@/lib/date-only";
 

apps/web/components/dashboard/dashboard-layout.tsx

@@ -5,7 +5,7 @@ import { Plus } from "lucide-react";
 import type { Doc } from "@repo/backend/_generated/dataModel";
 import { formatDateShortFromDateOnly } from "@/lib/date-only";
 
-import { ActivityLogDialog } from "./activity-log-dialog";
+import { ActivityLogDialogLazy as ActivityLogDialog } from "./activity-log-dialog-lazy";
 import { AnnouncementBanner } from "./announcement-banner";
 import { PaymentRequiredBanner } from "./payment-required-banner";
 import { DashboardNav } from "./dashboard-nav";

apps/web/components/dashboard/mobile-nav.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Plus } from "lucide-react";
 
-import { ActivityLogDialog } from "./activity-log-dialog";
+import { ActivityLogDialogLazy as ActivityLogDialog } from "./activity-log-dialog-lazy";
 import { navItems } from "./dashboard-nav";
 import { cn } from "@/lib/utils";
 

apps/web/components/editor/rich-text-viewer.tsx

@@ -2,16 +2,48 @@
 
 import { useMemo } from 'react';
 
-import { convertContentToHtml } from '@/lib/rich-text';
+import { convertContentToHtmlLite } from '@/lib/rich-text-html';
 import { cn } from '@/lib/utils';
 
+type Maybe<T> = T | null | undefined;
+
+function parseJsonContent(value: Maybe<string>) {
+  if (typeof value !== 'string' || !value.trim().startsWith('{')) return null;
+  try {
+    const parsed = JSON.parse(value);
+    return typeof parsed === 'object' && parsed !== null ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+function toHtml(content: Maybe<string>): string | null {
+  const doc = parseJsonContent(content);
+  if (doc) {
+    return convertContentToHtmlLite(doc);
+  }
+  if (typeof content === 'string' && content.trim().length > 0) {
+    return escapeHtml(content).replace(/\n/g, '<br />');
+  }
+  return null;
+}
+
 interface RichTextViewerProps {
   content?: string | null;
   className?: string;
 }
 
 export function RichTextViewer({ content, className }: RichTextViewerProps) {
-  const html = useMemo(() => convertContentToHtml(content), [content]);
+  const html = useMemo(() => toHtml(content), [content]);
 
   if (!html) {
     return null;

apps/web/hooks/use-mentionable-users.ts

@@ -3,7 +3,7 @@
 import { useQuery } from 'convex/react';
 import { api } from '@repo/backend';
 import type { Id } from '@repo/backend/_generated/dataModel';
-import type { MentionableUser } from '@/lib/rich-text';
+import type { MentionableUser } from '@/lib/rich-text-utils';
 
 export function useMentionableUsers(challengeId: string) {
   const users = useQuery(api.queries.participations.getMentionable, {

apps/web/lib/rich-text-html.ts

@@ -0,0 +1,108 @@
+/**
+ * Lightweight JSON-to-HTML converter for Tiptap content.
+ *
+ * This replaces the heavy `generateHTML()` from @tiptap/html which pulls in
+ * StarterKit (~500KB). The feed viewer only needs to render paragraphs, text
+ * with marks, mentions, lists, blockquotes, code blocks, and hard breaks.
+ */
+
+type JSONContent = {
+  type?: string;
+  attrs?: Record<string, unknown>;
+  content?: JSONContent[];
+  text?: string;
+  marks?: Array<{ type: string; attrs?: Record<string, unknown> }>;
+};
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+function renderMarks(text: string, marks?: JSONContent["marks"]): string {
+  if (!marks || marks.length === 0) return escapeHtml(text);
+
+  let html = escapeHtml(text);
+  for (const mark of marks) {
+    switch (mark.type) {
+      case "bold":
+        html = `<strong>${html}</strong>`;
+        break;
+      case "italic":
+        html = `<em>${html}</em>`;
+        break;
+      case "strike":
+        html = `<s>${html}</s>`;
+        break;
+      case "code":
+        html = `<code>${html}</code>`;
+        break;
+      case "link": {
+        const href = escapeHtml(String(mark.attrs?.href ?? ""));
+        html = `<a href="${href}" rel="noopener noreferrer nofollow">${html}</a>`;
+        break;
+      }
+    }
+  }
+  return html;
+}
+
+function renderNode(node: JSONContent): string {
+  if (node.type === "text" && typeof node.text === "string") {
+    return renderMarks(node.text, node.marks);
+  }
+
+  const children = node.content?.map(renderNode).join("") ?? "";
+
+  switch (node.type) {
+    case "doc":
+      return children;
+    case "paragraph":
+      return `<p>${children || "<br>"}</p>`;
+    case "heading": {
+      const level = Math.min(Math.max(Number(node.attrs?.level) || 1, 1), 6);
+      return `<h${level}>${children}</h${level}>`;
+    }
+    case "blockquote":
+      return `<blockquote>${children}</blockquote>`;
+    case "bulletList":
+      return `<ul>${children}</ul>`;
+    case "orderedList": {
+      const start = node.attrs?.start;
+      const attr = start && start !== 1 ? ` start="${start}"` : "";
+      return `<ol${attr}>${children}</ol>`;
+    }
+    case "listItem":
+      return `<li>${children}</li>`;
+    case "codeBlock":
+      return `<pre><code>${children}</code></pre>`;
+    case "horizontalRule":
+      return "<hr>";
+    case "hardBreak":
+      return "<br>";
+    case "mention": {
+      const username =
+        typeof node.attrs?.username === "string"
+          ? node.attrs.username
+          : typeof node.attrs?.label === "string"
+            ? String(node.attrs.label).replace(/^@/, "")
+            : String(node.attrs?.id ?? "");
+      return `<span class="mention-token">@${escapeHtml(username)}</span>`;
+    }
+    default:
+      return children;
+  }
+}
+
+/**
+ * Convert Tiptap JSON content to HTML without importing @tiptap/html or StarterKit.
+ * Supports paragraphs, headings, lists, blockquotes, code blocks, mentions,
+ * and inline marks (bold, italic, strike, code, link).
+ */
+export function convertContentToHtmlLite(doc: JSONContent): string {
+  return renderNode(doc);
+}

apps/web/lib/rich-text-utils.ts

@@ -0,0 +1,113 @@
+/**
+ * Lightweight rich-text utilities that do NOT import Tiptap.
+ *
+ * Import from here (not rich-text.ts) when you only need parsing, empty checks,
+ * or types — avoids pulling ~500KB of Tiptap into the client bundle.
+ */
+
+type Maybe<T> = T | null | undefined;
+
+type JSONContent = {
+  type?: string;
+  attrs?: Record<string, unknown>;
+  content?: JSONContent[];
+  text?: string;
+  marks?: Array<{ type: string; attrs?: Record<string, unknown> }>;
+};
+
+export interface MentionableUser {
+  id: string;
+  username: string;
+  name: string | null;
+  avatarUrl: string | null;
+}
+
+export const MENTION_CLASS_NAME = 'mention-token';
+
+function isJsonContent(value: Maybe<string>): value is string {
+  return typeof value === 'string' && value.trim().startsWith('{');
+}
+
+export function parseEditorContent(value: Maybe<string>): JSONContent | null {
+  if (!isJsonContent(value)) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(value) as JSONContent;
+    if (typeof parsed !== 'object' || parsed === null) {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+function collectFromNode(
+  node: JSONContent,
+  state: { text: string[]; mentions: Set<string> },
+) {
+  if (!node) return;
+
+  if (node.type === 'text' && typeof node.text === 'string') {
+    state.text.push(node.text);
+  }
+
+  if (node.type === 'mention') {
+    const id = typeof node.attrs?.id === 'string' ? node.attrs.id : null;
+    if (id) {
+      state.mentions.add(id);
+    }
+    const label =
+      typeof node.attrs?.label === 'string'
+        ? node.attrs.label
+        : typeof node.attrs?.username === 'string'
+          ? `@${node.attrs.username}`
+          : null;
+    if (label) {
+      state.text.push(label);
+    }
+  }
+
+  if (Array.isArray(node.content)) {
+    for (const child of node.content) {
+      collectFromNode(child, state);
+    }
+  }
+}
+
+export function getPlainTextFromJson(doc: JSONContent | null): string {
+  if (!doc) {
+    return '';
+  }
+
+  const state = { text: [] as string[], mentions: new Set<string>() };
+  collectFromNode(doc, state);
+
+  return state.text.join(' ');
+}
+
+export function getPlainTextFromValue(value: Maybe<string>): string {
+  const doc = parseEditorContent(value);
+  if (doc) {
+    return getPlainTextFromJson(doc);
+  }
+  return typeof value === 'string' ? value : '';
+}
+
+export function extractMentionedUserIds(value: Maybe<string>): string[] {
+  const doc = parseEditorContent(value);
+  if (!doc) {
+    return [];
+  }
+
+  const state = { text: [] as string[], mentions: new Set<string>() };
+  collectFromNode(doc, state);
+  return Array.from(state.mentions);
+}
+
+export function isEditorContentEmpty(value: Maybe<string>): boolean {
+  const text = getPlainTextFromValue(value);
+  return text.trim().length === 0;
+}