feat(ui/perf): implement loading states, keyboard navigation, and lazy-loaded tools

Add comprehensive UX and performance improvements: **Loading States & Feedback:** - Add loading overlay with spinner and custom messages - Integrate loading states into all file operations (open, save, export) - Create loading-store.ts for centralized loading state management **Keyboard Navigation:** - Expand keyboard shortcuts to include tool selection (1-7) - Add layer navigation with Arrow Up/Down - Add layer operations (Ctrl+D duplicate, Delete/Backspace remove) - Display keyboard shortcuts in tool tooltips - Enhanced keyboard shortcut system with proper key conflict handling **Performance - Code Splitting:** - Implement dynamic tool loader with lazy loading - Tools load on-demand when first selected - Preload common tools (pencil, brush, eraser) for instant access - Add tool caching to prevent redundant loads - Reduces initial bundle size and improves startup time **Integration:** - Add LoadingOverlay to app layout - Update canvas-with-tools to use lazy-loaded tool instances - Add keyboard shortcut hints to tool palette UI 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-21 16:08:24 +01:00
parent 108dfb5cec
commit 2e18f43453
8 changed files with 397 additions and 107 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import './globals.css';
 import { ToastProvider } from '@/components/providers/toast-provider';
 import { ContextMenu } from '@/components/ui/context-menu';
+import { LoadingOverlay } from '@/components/ui/loading-overlay';

 export const metadata: Metadata = {
  title: 'Paint UI - Browser Image Editor',
@@ -38,6 +39,7 @@ export default function RootLayout({
        {children}
        <ToastProvider />
        <ContextMenu />
+        <LoadingOverlay />
      </body>
    </html>
  );
--- a/components/canvas/canvas-with-tools.tsx
+++ b/components/canvas/canvas-with-tools.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useCanvasStore, useLayerStore, useToolStore } from '@/store';
 import { useHistoryStore } from '@/store/history-store';
 import { useSelectionStore } from '@/store/selection-store';
@@ -9,48 +9,17 @@ import { drawMarchingAnts } from '@/lib/selection-utils';
 import { getContext, drawGrid, drawCheckerboard } from '@/lib/canvas-utils';
 import { renderText } from '@/lib/text-utils';
 import { DrawCommand } from '@/core/commands';
-import {
-  PencilTool,
-  BrushTool,
-  EraserTool,
-  FillTool,
-  EyedropperTool,
-  RectangularSelectionTool,
-  EllipticalSelectionTool,
-  LassoSelectionTool,
-  MagicWandTool,
-  MoveTool,
-  FreeTransformTool,
-  ShapeTool,
-  TextTool,
-  type BaseTool,
-} from '@/tools';
+import { getTool, preloadCommonTools } from '@/lib/tool-loader';
+import type { BaseTool } from '@/tools';
 import type { PointerState } from '@/types';
 import { cn } from '@/lib/utils';
 import { OnCanvasTextEditor } from './on-canvas-text-editor';

-// Tool instances
-const tools: Record<string, BaseTool> = {
-  pencil: new PencilTool(),
-  brush: new BrushTool(),
-  eraser: new EraserTool(),
-  fill: new FillTool(),
-  eyedropper: new EyedropperTool(),
-  select: new RectangularSelectionTool(),
-  'rectangular-select': new RectangularSelectionTool(),
-  'elliptical-select': new EllipticalSelectionTool(),
-  'lasso-select': new LassoSelectionTool(),
-  'magic-wand': new MagicWandTool(),
-  move: new MoveTool(),
-  transform: new FreeTransformTool(),
-  shape: new ShapeTool(),
-  text: new TextTool(),
-};
-
 export function CanvasWithTools() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const drawCommandRef = useRef<DrawCommand | null>(null);
+  const toolsCache = useRef<Record<string, BaseTool>>({});

  const {
    width,
@@ -83,6 +52,52 @@ export function CanvasWithTools() {
    pressure: 1,
  });

+  // Helper to get tool (lazy load if not in cache)
+  const getToolInstance = useCallback(async (toolKey: string): Promise<BaseTool | null> => {
+    if (toolsCache.current[toolKey]) {
+      return toolsCache.current[toolKey];
+    }
+
+    try {
+      const tool = await getTool(toolKey as any);
+      toolsCache.current[toolKey] = tool;
+      return tool;
+    } catch (error) {
+      console.error(`Failed to load tool ${toolKey}:`, error);
+      return null;
+    }
+  }, []);
+
+  // Preload common tools on mount
+  useEffect(() => {
+    preloadCommonTools();
+
+    // Preload tools into cache
+    const initTools = async () => {
+      const commonTools = ['pencil', 'brush', 'eraser'];
+      for (const toolKey of commonTools) {
+        await getToolInstance(toolKey);
+      }
+    };
+
+    initTools();
+  }, [getToolInstance]);
+
+  // Eagerly load active tool when it changes
+  useEffect(() => {
+    const loadActiveTool = async () => {
+      // Load the active tool
+      await getToolInstance(activeTool);
+
+      // For selection tools, also load the specific selection type
+      if (activeTool === 'select') {
+        await getToolInstance(`${selectionType}-select`);
+      }
+    };
+
+    loadActiveTool();
+  }, [activeTool, selectionType, getToolInstance]);
+
  // Render canvas
  useEffect(() => {
    const canvas = canvasRef.current;
@@ -212,7 +227,9 @@ export function CanvasWithTools() {
    // Transform tools
    const transformTools = ['move', 'transform'];
    if (e.button === 0 && !e.shiftKey && transformTools.includes(activeTool)) {
-      const tool = tools[activeTool];
+      const tool = toolsCache.current[activeTool];
+      if (!tool) return; // Tool not loaded yet
+
      const newPointer: PointerState = {
        isDown: true,
        x: canvasPos.x,
@@ -244,7 +261,10 @@ export function CanvasWithTools() {
        pressure: e.pressure || 1,
      };

-      tools.text.onPointerDown(newPointer, {} as any, settings);
+      const textTool = toolsCache.current['text'];
+      if (textTool) {
+        textTool.onPointerDown(newPointer, {} as any, settings);
+      }
      return;
    }

@@ -254,7 +274,8 @@ export function CanvasWithTools() {
      const activeLayer = getActiveLayer();
      if (!activeLayer || !activeLayer.canvas) return;

-      const tool = tools[`${selectionType}-select`] || tools['select'];
+      const tool = toolsCache.current[`${selectionType}-select`] || toolsCache.current['select'];
+      if (!tool) return; // Tool not loaded yet
      const newPointer: PointerState = {
        isDown: true,
        x: canvasPos.x,
@@ -289,13 +310,16 @@ export function CanvasWithTools() {

      setPointer(newPointer);

+      const tool = toolsCache.current[activeTool];
+      if (!tool) return; // Tool not loaded yet
+
      // Create draw command for history
-      drawCommandRef.current = new DrawCommand(activeLayer.id, tools[activeTool].name);
+      drawCommandRef.current = new DrawCommand(activeLayer.id, tool.name);

      // Call tool's onPointerDown
      const ctx = activeLayer.canvas.getContext('2d');
      if (ctx) {
-        tools[activeTool].onPointerDown(newPointer, ctx, settings);
+        tool.onPointerDown(newPointer, ctx, settings);
      }
    }
  };
@@ -330,9 +354,12 @@ export function CanvasWithTools() {

      setPointer(newPointer);

+      const tool = toolsCache.current[activeTool];
+      if (!tool) return; // Tool not loaded yet
+
      const ctx = activeLayer.canvas.getContext('2d');
      if (ctx) {
-        tools[activeTool].onPointerMove(newPointer, ctx, settings);
+        tool.onPointerMove(newPointer, ctx, settings);
      }
    }
  };
@@ -348,9 +375,12 @@ export function CanvasWithTools() {
      const activeLayer = getActiveLayer();
      if (!activeLayer || !activeLayer.canvas) return;

+      const tool = toolsCache.current[activeTool];
+      if (!tool) return; // Tool not loaded yet
+
      const ctx = activeLayer.canvas.getContext('2d');
      if (ctx) {
-        tools[activeTool].onPointerUp(pointer, ctx, settings);
+        tool.onPointerUp(pointer, ctx, settings);
      }

      // Capture after state and add to history
@@ -369,7 +399,7 @@ export function CanvasWithTools() {
      ref={containerRef}
      className={cn(
        'relative h-full w-full overflow-hidden bg-canvas-bg',
-        isPanning ? 'cursor-grabbing' : `cursor-${tools[activeTool]?.getCursor(settings) || 'default'}`
+        isPanning ? 'cursor-grabbing' : `cursor-${toolsCache.current[activeTool]?.getCursor(settings) || 'default'}`
      )}
      onWheel={handleWheel}
      onPointerDown={handlePointerDown}
--- a/components/tools/tool-palette.tsx
+++ b/components/tools/tool-palette.tsx
@@ -13,14 +13,14 @@ import {
 } from 'lucide-react';
 import { cn } from '@/lib/utils';

-const tools: { type: ToolType; icon: React.ReactNode; label: string }[] = [
-  { type: 'pencil', icon: <Pencil className="h-5 w-5" />, label: 'Pencil' },
-  { type: 'brush', icon: <Paintbrush className="h-5 w-5" />, label: 'Brush' },
-  { type: 'eraser', icon: <Eraser className="h-5 w-5" />, label: 'Eraser' },
-  { type: 'fill', icon: <PaintBucket className="h-5 w-5" />, label: 'Fill' },
-  { type: 'eyedropper', icon: <Pipette className="h-5 w-5" />, label: 'Eyedropper' },
-  { type: 'text', icon: <Type className="h-5 w-5" />, label: 'Text' },
-  { type: 'select', icon: <MousePointer className="h-5 w-5" />, label: 'Select' },
+const tools: { type: ToolType; icon: React.ReactNode; label: string; shortcut: string }[] = [
+  { type: 'pencil', icon: <Pencil className="h-5 w-5" />, label: 'Pencil', shortcut: '1' },
+  { type: 'brush', icon: <Paintbrush className="h-5 w-5" />, label: 'Brush', shortcut: '2' },
+  { type: 'eraser', icon: <Eraser className="h-5 w-5" />, label: 'Eraser', shortcut: '3' },
+  { type: 'fill', icon: <PaintBucket className="h-5 w-5" />, label: 'Fill', shortcut: '4' },
+  { type: 'eyedropper', icon: <Pipette className="h-5 w-5" />, label: 'Eyedropper', shortcut: '5' },
+  { type: 'text', icon: <Type className="h-5 w-5" />, label: 'Text', shortcut: '6' },
+  { type: 'select', icon: <MousePointer className="h-5 w-5" />, label: 'Select', shortcut: '7' },
 ];

 export function ToolPalette() {
@@ -49,9 +49,9 @@ export function ToolPalette() {
                ? 'bg-primary text-primary-foreground'
                : 'hover:bg-accent text-muted-foreground hover:text-foreground'
            )}
-            aria-label={tool.label}
+            aria-label={`${tool.label} (${tool.shortcut})`}
            aria-pressed={activeTool === tool.type}
-            title={tool.label}
+            title={`${tool.label} (${tool.shortcut})`}
          >
            {tool.icon}
          </button>
--- a/components/ui/loading-overlay.tsx
+++ b/components/ui/loading-overlay.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { useLoadingStore } from '@/store/loading-store';
+import { Loader2 } from 'lucide-react';
+
+export function LoadingOverlay() {
+  const { isLoading, loadingMessage } = useLoadingStore();
+
+  if (!isLoading) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[10000] bg-background/80 backdrop-blur-sm flex items-center justify-center animate-fadeIn"
+      role="dialog"
+      aria-busy="true"
+      aria-label="Loading"
+    >
+      <div className="bg-card border border-border rounded-lg p-6 shadow-2xl flex flex-col items-center gap-4 min-w-[300px]">
+        <Loader2 className="h-12 w-12 text-primary animate-spin" aria-hidden="true" />
+        {loadingMessage && (
+          <p className="text-sm font-medium text-foreground text-center">
+            {loadingMessage}
+          </p>
+        )}
+        <p className="text-xs text-muted-foreground">Please wait...</p>
+      </div>
+    </div>
+  );
+}
--- a/hooks/use-file-operations.ts
+++ b/hooks/use-file-operations.ts
@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useCanvasStore, useLayerStore } from '@/store';
 import { useHistoryStore } from '@/store/history-store';
+import { useLoadingStore } from '@/store/loading-store';
 import {
  openImageFile,
  exportCanvasAsImage,
@@ -18,6 +19,7 @@ export function useFileOperations() {
  const { width, height, setDimensions } = useCanvasStore();
  const { layers, createLayer, clearLayers } = useLayerStore();
  const { clearHistory } = useHistoryStore();
+  const { setLoading } = useLoadingStore();

  /**
   * Create new image
@@ -43,6 +45,7 @@ export function useFileOperations() {
   */
  const openImage = useCallback(
    async (file: File) => {
+      setLoading(true, `Opening ${file.name}...`);
      try {
        const img = await openImageFile(file);

@@ -69,9 +72,11 @@ export function useFileOperations() {
      } catch (error) {
        console.error('Failed to open image:', error);
        toast.error('Failed to open image file');
+      } finally {
+        setLoading(false);
      }
    },
-    [clearLayers, clearHistory, setDimensions, createLayer]
+    [clearLayers, clearHistory, setDimensions, createLayer, setLoading]
  );

  /**
@@ -79,6 +84,7 @@ export function useFileOperations() {
   */
  const openProject = useCallback(
    async (file: File) => {
+      setLoading(true, `Opening project ${file.name}...`);
      try {
        const projectData = await loadProject(file);

@@ -114,9 +120,11 @@ export function useFileOperations() {
      } catch (error) {
        console.error('Failed to open project:', error);
        toast.error('Failed to open project file');
+      } finally {
+        setLoading(false);
      }
    },
-    [clearLayers, clearHistory, setDimensions, createLayer]
+    [clearLayers, clearHistory, setDimensions, createLayer, setLoading]
  );

  /**
@@ -124,6 +132,7 @@ export function useFileOperations() {
   */
  const exportImage = useCallback(
    async (format: 'png' | 'jpeg' | 'webp', quality: number, filename: string) => {
+      setLoading(true, `Exporting ${filename}.${format}...`);
      try {
        // Create temporary canvas with all layers
        const tempCanvas = document.createElement('canvas');
@@ -155,9 +164,11 @@ export function useFileOperations() {
      } catch (error) {
        console.error('Failed to export image:', error);
        toast.error('Failed to export image');
+      } finally {
+        setLoading(false);
      }
    },
-    [layers, width, height]
+    [layers, width, height, setLoading]
  );

  /**
@@ -165,15 +176,18 @@ export function useFileOperations() {
   */
  const saveProject = useCallback(
    async (filename: string) => {
+      setLoading(true, `Saving project ${filename}.json...`);
      try {
        await exportProject(layers, width, height, filename);
        toast.success(`Saved project ${filename}.json`);
      } catch (error) {
        console.error('Failed to save project:', error);
        toast.error('Failed to save project');
+      } finally {
+        setLoading(false);
      }
    },
-    [layers, width, height]
+    [layers, width, height, setLoading]
  );

  /**
--- a/hooks/use-keyboard-shortcuts.ts
+++ b/hooks/use-keyboard-shortcuts.ts
@@ -1,5 +1,8 @@
 import { useEffect } from 'react';
 import { useHistoryStore } from '@/store/history-store';
+import { useToolStore, useLayerStore, useTextStore } from '@/store';
+import { duplicateLayerWithHistory, deleteLayerWithHistory } from '@/lib/layer-operations';
+import type { ToolType } from '@/types';

 /**
 * Keyboard shortcuts configuration
@@ -14,52 +17,34 @@ interface KeyboardShortcut {
  description: string;
 }

+/**
+ * Tool shortcuts mapping
+ */
+const TOOL_SHORTCUTS: Record<string, ToolType> = {
+  '1': 'pencil',
+  '2': 'brush',
+  '3': 'eraser',
+  '4': 'fill',
+  '5': 'eyedropper',
+  '6': 'text',
+  '7': 'select',
+};
+
 /**
 * Hook to manage keyboard shortcuts
 */
 export function useKeyboardShortcuts() {
  const { undo, redo, canUndo, canRedo } = useHistoryStore();
+  const { setActiveTool } = useToolStore();
+  const { layers, activeLayerId, setActiveLayer } = useLayerStore();
+  const { isOnCanvasEditorActive } = useTextStore();

  useEffect(() => {
-    const shortcuts: KeyboardShortcut[] = [
-      {
-        key: 'z',
-        ctrl: true,
-        shift: false,
-        handler: () => {
-          if (canUndo()) {
-            undo();
-          }
-        },
-        description: 'Undo',
-      },
-      {
-        key: 'z',
-        ctrl: true,
-        shift: true,
-        handler: () => {
-          if (canRedo()) {
-            redo();
-          }
-        },
-        description: 'Redo',
-      },
-      {
-        key: 'y',
-        ctrl: true,
-        handler: () => {
-          if (canRedo()) {
-            redo();
-          }
-        },
-        description: 'Redo (alternative)',
-      },
-    ];
-
    const handleKeyDown = (e: KeyboardEvent) => {
-      // Check if we're in an input field
+      // Check if we're in an input field or text editor is active
      const target = e.target as HTMLElement;
      if (
+        isOnCanvasEditorActive ||
        target.tagName === 'INPUT' ||
        target.tagName === 'TEXTAREA' ||
        target.isContentEditable
@@ -67,21 +52,70 @@ export function useKeyboardShortcuts() {
        return;
      }

-      for (const shortcut of shortcuts) {
-        const ctrlMatch = shortcut.ctrl ? (e.ctrlKey || e.metaKey) : !e.ctrlKey && !e.metaKey;
-        const shiftMatch = shortcut.shift ? e.shiftKey : !e.shiftKey;
-        const altMatch = shortcut.alt ? e.altKey : !e.altKey;
+      // Tool selection shortcuts: 1-7
+      if (TOOL_SHORTCUTS[e.key]) {
+        e.preventDefault();
+        setActiveTool(TOOL_SHORTCUTS[e.key]);
+        return;
+      }

-        if (
-          e.key.toLowerCase() === shortcut.key.toLowerCase() &&
-          ctrlMatch &&
-          shiftMatch &&
-          altMatch
-        ) {
-          e.preventDefault();
-          shortcut.handler();
-          break;
+      // Layer navigation: Arrow Up/Down
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+
+        // Sort layers by order (highest first, same as UI)
+        const sortedLayers = [...layers].sort((a, b) => b.order - a.order);
+        const currentIndex = sortedLayers.findIndex((l) => l.id === activeLayerId);
+
+        if (currentIndex === -1) return;
+
+        if (e.key === 'ArrowUp' && currentIndex > 0) {
+          setActiveLayer(sortedLayers[currentIndex - 1].id);
+        } else if (e.key === 'ArrowDown' && currentIndex < sortedLayers.length - 1) {
+          setActiveLayer(sortedLayers[currentIndex + 1].id);
        }
+        return;
+      }
+
+      // Delete layer: Delete or Backspace (without modifier keys)
+      if ((e.key === 'Delete' || e.key === 'Backspace') && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
+        e.preventDefault();
+        if (activeLayerId && layers.length > 1) {
+          if (confirm('Delete this layer?')) {
+            deleteLayerWithHistory(activeLayerId);
+          }
+        }
+        return;
+      }
+
+      // Duplicate layer: Ctrl+D
+      if ((e.ctrlKey || e.metaKey) && e.key === 'd' && !e.shiftKey) {
+        e.preventDefault();
+        if (activeLayerId) {
+          duplicateLayerWithHistory(activeLayerId);
+        }
+        return;
+      }
+
+      // Undo: Ctrl+Z (but not Ctrl+Shift+Z)
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault();
+        if (canUndo()) {
+          undo();
+        }
+        return;
+      }
+
+      // Redo: Ctrl+Shift+Z or Ctrl+Y
+      if (
+        ((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey) ||
+        ((e.ctrlKey || e.metaKey) && e.key === 'y')
+      ) {
+        e.preventDefault();
+        if (canRedo()) {
+          redo();
+        }
+        return;
      }
    };

@@ -90,7 +124,17 @@ export function useKeyboardShortcuts() {
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
-  }, [undo, redo, canUndo, canRedo]);
+  }, [
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    setActiveTool,
+    layers,
+    activeLayerId,
+    setActiveLayer,
+    isOnCanvasEditorActive,
+  ]);
 }

 /**
--- a/lib/tool-loader.ts
+++ b/lib/tool-loader.ts
@@ -0,0 +1,152 @@
+import type { BaseTool } from '@/tools';
+import type { ToolType } from '@/types';
+
+/**
+ * Tool loader cache
+ */
+const toolCache = new Map<string, BaseTool>();
+const toolLoadingPromises = new Map<string, Promise<BaseTool>>();
+
+/**
+ * Dynamically import and instantiate a tool
+ */
+async function loadTool(toolType: ToolType): Promise<BaseTool> {
+  // Check cache first
+  if (toolCache.has(toolType)) {
+    return toolCache.get(toolType)!;
+  }
+
+  // Check if already loading
+  if (toolLoadingPromises.has(toolType)) {
+    return toolLoadingPromises.get(toolType)!;
+  }
+
+  // Start loading
+  const loadPromise = (async () => {
+    let tool: BaseTool;
+
+    switch (toolType) {
+      case 'pencil': {
+        const { PencilTool } = await import('@/tools/pencil-tool');
+        tool = new PencilTool();
+        break;
+      }
+      case 'brush': {
+        const { BrushTool } = await import('@/tools/brush-tool');
+        tool = new BrushTool();
+        break;
+      }
+      case 'eraser': {
+        const { EraserTool } = await import('@/tools/eraser-tool');
+        tool = new EraserTool();
+        break;
+      }
+      case 'fill': {
+        const { FillTool } = await import('@/tools/fill-tool');
+        tool = new FillTool();
+        break;
+      }
+      case 'eyedropper': {
+        const { EyedropperTool } = await import('@/tools/eyedropper-tool');
+        tool = new EyedropperTool();
+        break;
+      }
+      case 'select':
+      case 'rectangular-select': {
+        const { RectangularSelectionTool } = await import('@/tools/rectangular-selection-tool');
+        tool = new RectangularSelectionTool();
+        break;
+      }
+      case 'elliptical-select': {
+        const { EllipticalSelectionTool } = await import('@/tools/elliptical-selection-tool');
+        tool = new EllipticalSelectionTool();
+        break;
+      }
+      case 'lasso-select': {
+        const { LassoSelectionTool } = await import('@/tools/lasso-selection-tool');
+        tool = new LassoSelectionTool();
+        break;
+      }
+      case 'magic-wand': {
+        const { MagicWandTool } = await import('@/tools/magic-wand-tool');
+        tool = new MagicWandTool();
+        break;
+      }
+      case 'move': {
+        const { MoveTool } = await import('@/tools/move-tool');
+        tool = new MoveTool();
+        break;
+      }
+      case 'transform': {
+        const { FreeTransformTool } = await import('@/tools/free-transform-tool');
+        tool = new FreeTransformTool();
+        break;
+      }
+      case 'shape': {
+        const { ShapeTool } = await import('@/tools/shape-tool');
+        tool = new ShapeTool();
+        break;
+      }
+      case 'text': {
+        const { TextTool } = await import('@/tools/text-tool');
+        tool = new TextTool();
+        break;
+      }
+      default: {
+        // Fallback to pencil tool
+        const { PencilTool } = await import('@/tools/pencil-tool');
+        tool = new PencilTool();
+      }
+    }
+
+    // Cache the tool
+    toolCache.set(toolType, tool);
+    toolLoadingPromises.delete(toolType);
+
+    return tool;
+  })();
+
+  toolLoadingPromises.set(toolType, loadPromise);
+  return loadPromise;
+}
+
+/**
+ * Get a tool instance (loads it if not cached)
+ */
+export async function getTool(toolType: ToolType): Promise<BaseTool> {
+  return loadTool(toolType);
+}
+
+/**
+ * Preload a tool (for performance optimization)
+ */
+export function preloadTool(toolType: ToolType): void {
+  loadTool(toolType).catch((error) => {
+    console.error(`Failed to preload tool ${toolType}:`, error);
+  });
+}
+
+/**
+ * Preload commonly used tools
+ */
+export function preloadCommonTools(): void {
+  // Preload the most commonly used tools
+  preloadTool('pencil');
+  preloadTool('brush');
+  preloadTool('eraser');
+}
+
+/**
+ * Check if a tool is loaded
+ */
+export function isToolLoaded(toolType: ToolType): boolean {
+  return toolCache.has(toolType);
+}
+
+/**
+ * Clear tool cache (for testing)
+ */
+export function clearToolCache(): void {
+  toolCache.clear();
+  toolLoadingPromises.clear();
+}
--- a/store/loading-store.ts
+++ b/store/loading-store.ts
@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+interface LoadingState {
+  isLoading: boolean;
+  loadingMessage: string | null;
+  setLoading: (loading: boolean, message?: string) => void;
+}
+
+export const useLoadingStore = create<LoadingState>((set) => ({
+  isLoading: false,
+  loadingMessage: null,
+
+  setLoading: (loading: boolean, message?: string) => {
+    set({
+      isLoading: loading,
+      loadingMessage: message || null,
+    });
+  },
+}));