perf: implement component and image lazy loading (#1382)

src/app/page.tsx

@@ -1,6 +1,18 @@
-import VideoEditor from "@/components/VideoEditor";
+import dynamic from "next/dynamic";
 import Footer from "@/components/Footer";
 
+const VideoEditor = dynamic(() => import("@/components/VideoEditor"), {
+  ssr: false,
+  loading: () => (
+    <div className="w-full max-w-6xl mx-auto h-[600px] flex items-center justify-center animate-pulse bg-[var(--surface)] border border-[var(--border)] rounded-xl mt-8">
+      <div className="text-[var(--muted)] font-heading uppercase tracking-widest text-sm flex items-center gap-2">
+        <span className="w-2 h-2 rounded-full bg-[var(--accent)] animate-ping" />
+        Loading Video Editor...
+      </div>
+    </div>
+  ),
+});
+
 export default function Home() {
   return (
     <>

src/components/DownloadResult.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import dynamic from "next/dynamic";
 import { ExportResult } from "@/lib/types";
 import { formatBytes } from "@/lib/utils";
 import { Download, RotateCcw, Share2, AlertCircle, Volume2, VolumeX } from "lucide-react";
-import LottiePlayer from "./LottiePlayer";
+const LottiePlayer = dynamic(() => import("./LottiePlayer"), { ssr: false });
 import { NativeShareButton } from "./NativeShareButton";
 import successAnim from "@/lib/lottie/success.json";
 import { cn } from "@/lib/utils";

src/components/ExportOverlay.tsx

@@ -3,10 +3,12 @@
 import FocusTrap from "focus-trap-react";
 import { useEffect, useRef, useCallback, useState } from "react";
 import { ExportStatus } from "@/lib/types";
-import LottiePlayer from "./LottiePlayer";
+import dynamic from "next/dynamic";
 import spinnerAnim from "@/lib/lottie/spinner.json";
 import TipCarousel from "./TipCarousel";
 
+const LottiePlayer = dynamic(() => import("./LottiePlayer"), { ssr: false });
+
 interface Props {
   status: ExportStatus;
   progress: number;

src/components/FileUpload.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useRef, useState, useEffect, useCallback } from "react";
+import dynamic from "next/dynamic";
 import { Film, FolderOpen } from "lucide-react";
-import LottiePlayer from "./LottiePlayer";
+
+const LottiePlayer = dynamic(() => import("./LottiePlayer"), { ssr: false });
 import uploadAnim from "@/lib/lottie/upload.json";
 import { cn, formatBytes, formatDuration } from "@/lib/utils";
 import { MAX_FILE_SIZE, WARNING_FILE_SIZE } from "@/lib/types";

src/components/VideoEditor.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useEffect, useMemo } from "react";
 import { useVideoEditor } from "@/hooks/useVideoEditor";
 import { TextOverlay } from "@/lib/types";
+import dynamic from "next/dynamic";
 import FileUpload from "./FileUpload";
 import VideoPreview from "./VideoPreview";
 import ThumbnailStrip from "./ThumbnailStrip";
@@ -14,17 +15,18 @@ import TextControls from "./TextControls";
 import AudioSpeedControl from "./AudioSpeedControl";
 import FormatSelector from "./FormatSelector";
 import ExportSettings from "./ExportSettings";
-import ExportOverlay from "./ExportOverlay";
-import DownloadResult from "./DownloadResult";
-import ImageOverlay from "./ImageOverlay"
+
+const ExportOverlay = dynamic(() => import("./ExportOverlay"), { ssr: false });
+const DownloadResult = dynamic(() => import("./DownloadResult"), { ssr: false });
+const ImageOverlay = dynamic(() => import("./ImageOverlay"), { ssr: false });
 import { getPresetById } from "@/lib/presets";
 
 import { cn } from "@/lib/utils";
 import {
   Layers, Crop, Scissors, RotateCw, Volume2, Type,
   SlidersHorizontal, Zap, AlertTriangle, Github, Copy
 } from "lucide-react";
-import OnboardingTour from "./OnboardingTour";
+const OnboardingTour = dynamic(() => import("./OnboardingTour"), { ssr: false });
 import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
 
 interface SectionProps {