From 7d58843c92737ec2a2dd9e9c1b162aafe692434e Mon Sep 17 00:00:00 2001 From: Saurav Panda Date: Thu, 9 Apr 2026 18:16:53 -0700 Subject: [PATCH] perf: lazy-load panel CSS by moving imports to component files (#305) --- src/components/AiChatSidebar.tsx | 1 + src/components/ClipboardHistory.tsx | 1 + src/components/DensityPicker.tsx | 1 + src/components/DependencyAnalyzer.tsx | 1 + src/components/DirectoryStats.tsx | 1 + src/components/DoraMetrics.tsx | 1 + src/components/EnvPanel.tsx | 1 + src/components/GitHubSidebar.tsx | 1 + src/components/GitLogViewer.tsx | 1 + src/components/PluginRuntime.tsx | 1 + src/components/PortScanner.tsx | 1 + src/components/QuickSwitcher.tsx | 1 + src/components/SettingsPage.tsx | 1 + src/components/TagManager.tsx | 1 + src/components/TaskGraph.tsx | 1 + src/components/TaskScheduler.tsx | 1 + src/components/TerminalRecording.tsx | 1 + src/components/TodoPanel.tsx | 1 + src/components/UnifiedSearch.tsx | 1 + src/components/WebVitals.tsx | 1 + src/components/WebhookEvents.tsx | 1 + src/components/WorkspaceManager.tsx | 1 + src/main.tsx | 61 --------------------------- 23 files changed, 22 insertions(+), 61 deletions(-) diff --git a/src/components/AiChatSidebar.tsx b/src/components/AiChatSidebar.tsx index 4721185..04a4b93 100644 --- a/src/components/AiChatSidebar.tsx +++ b/src/components/AiChatSidebar.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, useCallback, useRef } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/ai-chat.css"; /* ------------------------------------------------------------------ */ /* Types */ diff --git a/src/components/ClipboardHistory.tsx b/src/components/ClipboardHistory.tsx index 7ca1d12..9b4fa16 100644 --- a/src/components/ClipboardHistory.tsx +++ b/src/components/ClipboardHistory.tsx @@ -1,6 +1,7 @@ import { useState, useEffect, useCallback, useRef } from "react"; import { invoke } from "@tauri-apps/api/core"; import { Dialog, DialogContent } from "./ui/dialog"; +import "../styles/clipboard-history.css"; interface ClipboardEntry { id: number; diff --git a/src/components/DensityPicker.tsx b/src/components/DensityPicker.tsx index 2fced52..9496670 100644 --- a/src/components/DensityPicker.tsx +++ b/src/components/DensityPicker.tsx @@ -1,5 +1,6 @@ import { useState, useCallback } from "react"; import { applyDensity, saveDensity, type DensityMode } from "../themes/density"; +import "../styles/density-picker.css"; interface DensityPickerProps { currentMode: DensityMode; diff --git a/src/components/DependencyAnalyzer.tsx b/src/components/DependencyAnalyzer.tsx index e4d225c..d366ff2 100644 --- a/src/components/DependencyAnalyzer.tsx +++ b/src/components/DependencyAnalyzer.tsx @@ -1,6 +1,7 @@ import { useState, useCallback, useEffect, useMemo } from "react"; import { invoke } from "@tauri-apps/api/core"; import { Dialog, DialogContent } from "./ui/dialog"; +import "../styles/dependency-analyzer.css"; interface DependencyInfo { name: string; diff --git a/src/components/DirectoryStats.tsx b/src/components/DirectoryStats.tsx index ad3ce7d..7d8d479 100644 --- a/src/components/DirectoryStats.tsx +++ b/src/components/DirectoryStats.tsx @@ -1,6 +1,7 @@ import { useState, useCallback, useEffect, useMemo } from "react"; import { invoke } from "@tauri-apps/api/core"; import { Dialog, DialogContent } from "./ui/dialog"; +import "../styles/directory-stats.css"; interface ExtensionStat { extension: string; diff --git a/src/components/DoraMetrics.tsx b/src/components/DoraMetrics.tsx index ed2c0df..8c98e06 100644 --- a/src/components/DoraMetrics.tsx +++ b/src/components/DoraMetrics.tsx @@ -1,6 +1,7 @@ import { useState, useCallback, useEffect } from "react"; import { invoke } from "@tauri-apps/api/core"; import { Dialog, DialogContent } from "./ui/dialog"; +import "../styles/dora-metrics.css"; /* ------------------------------------------------------------------ */ /* Types */ diff --git a/src/components/EnvPanel.tsx b/src/components/EnvPanel.tsx index 2f7a679..7b88e88 100644 --- a/src/components/EnvPanel.tsx +++ b/src/components/EnvPanel.tsx @@ -2,6 +2,7 @@ import { useState, useCallback } from "react"; import { useEnvVault } from "../hooks/useEnvVault"; import { EnvVarRow } from "./EnvVarRow"; import { ProfileSelector } from "./ProfileSelector"; +import "../styles/env-panel.css"; interface EnvPanelProps { projectId: number; diff --git a/src/components/GitHubSidebar.tsx b/src/components/GitHubSidebar.tsx index d57fff5..9353cc7 100644 --- a/src/components/GitHubSidebar.tsx +++ b/src/components/GitHubSidebar.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, useCallback, useRef } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/github-sidebar.css"; /* ------------------------------------------------------------------ */ /* Types */ diff --git a/src/components/GitLogViewer.tsx b/src/components/GitLogViewer.tsx index 69fa11b..e7b22ef 100644 --- a/src/components/GitLogViewer.tsx +++ b/src/components/GitLogViewer.tsx @@ -1,6 +1,7 @@ import { useState, useEffect, useCallback } from "react"; import { invoke } from "@tauri-apps/api/core"; import { Dialog, DialogContent } from "./ui/dialog"; +import "../styles/git-log.css"; interface CommitEntry { id: string; diff --git a/src/components/PluginRuntime.tsx b/src/components/PluginRuntime.tsx index 8279c70..a88a84f 100644 --- a/src/components/PluginRuntime.tsx +++ b/src/components/PluginRuntime.tsx @@ -1,6 +1,7 @@ import { useState, useCallback, useEffect } from "react"; import { invoke } from "@tauri-apps/api/core"; import { Dialog, DialogContent } from "./ui/dialog"; +import "../styles/plugin-runtime.css"; interface PluginDetail { name: string; diff --git a/src/components/PortScanner.tsx b/src/components/PortScanner.tsx index aa7bdc8..cf8b236 100644 --- a/src/components/PortScanner.tsx +++ b/src/components/PortScanner.tsx @@ -1,5 +1,6 @@ import { useState, useCallback, useEffect } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/port-scanner.css"; interface PortResult { port: number; diff --git a/src/components/QuickSwitcher.tsx b/src/components/QuickSwitcher.tsx index f97408c..0ba0162 100644 --- a/src/components/QuickSwitcher.tsx +++ b/src/components/QuickSwitcher.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, useCallback, useRef, useMemo } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/quick-switcher.css"; /* ------------------------------------------------------------------ */ /* Types */ diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx index 9d51fa1..a84aee1 100644 --- a/src/components/SettingsPage.tsx +++ b/src/components/SettingsPage.tsx @@ -8,6 +8,7 @@ import { Button } from "./ui/button"; import { Input } from "./ui/input"; import { Switch } from "./ui/switch"; import { Label } from "./ui/label"; +import "../styles/settings-page.css"; /* ------------------------------------------------------------------ */ /* Types */ diff --git a/src/components/TagManager.tsx b/src/components/TagManager.tsx index a7eb367..26deac6 100644 --- a/src/components/TagManager.tsx +++ b/src/components/TagManager.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, useCallback } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/tag-manager.css"; interface TagInfo { name: string; diff --git a/src/components/TaskGraph.tsx b/src/components/TaskGraph.tsx index 4659adf..fa983e2 100644 --- a/src/components/TaskGraph.tsx +++ b/src/components/TaskGraph.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, useCallback, useMemo } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/task-graph.css"; interface TaskDep { source: string; diff --git a/src/components/TaskScheduler.tsx b/src/components/TaskScheduler.tsx index fd90769..9520a7d 100644 --- a/src/components/TaskScheduler.tsx +++ b/src/components/TaskScheduler.tsx @@ -1,6 +1,7 @@ import { useState, useEffect, useCallback } from "react"; import { invoke } from "@tauri-apps/api/core"; import { Dialog, DialogContent } from "./ui/dialog"; +import "../styles/task-scheduler.css"; interface ScheduledTask { id: number; diff --git a/src/components/TerminalRecording.tsx b/src/components/TerminalRecording.tsx index 346093a..4ea447d 100644 --- a/src/components/TerminalRecording.tsx +++ b/src/components/TerminalRecording.tsx @@ -1,6 +1,7 @@ import { useState, useCallback, useEffect, useRef, useMemo } from "react"; import { invoke } from "@tauri-apps/api/core"; import AnsiToHtml from "ansi-to-html"; +import "../styles/terminal-recording.css"; /* ------------------------------------------------------------------ */ /* Types */ diff --git a/src/components/TodoPanel.tsx b/src/components/TodoPanel.tsx index e9d05ab..27bf71f 100644 --- a/src/components/TodoPanel.tsx +++ b/src/components/TodoPanel.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, useCallback } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/todo-panel.css"; type Priority = "high" | "medium" | "low"; type Status = "todo" | "in_progress" | "done"; diff --git a/src/components/UnifiedSearch.tsx b/src/components/UnifiedSearch.tsx index b06249a..aa2787d 100644 --- a/src/components/UnifiedSearch.tsx +++ b/src/components/UnifiedSearch.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, useCallback, useRef, useMemo } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/unified-search.css"; /* ------------------------------------------------------------------ */ /* Types */ diff --git a/src/components/WebVitals.tsx b/src/components/WebVitals.tsx index 16a36e7..3a02fb4 100644 --- a/src/components/WebVitals.tsx +++ b/src/components/WebVitals.tsx @@ -1,5 +1,6 @@ import { useState, useCallback } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/web-vitals.css"; interface LighthouseResult { performance_score: number; diff --git a/src/components/WebhookEvents.tsx b/src/components/WebhookEvents.tsx index a736f3f..cba6a4f 100644 --- a/src/components/WebhookEvents.tsx +++ b/src/components/WebhookEvents.tsx @@ -1,5 +1,6 @@ import { useState, useCallback, useEffect, useRef } from "react"; import { invoke } from "@tauri-apps/api/core"; +import "../styles/webhook-events.css"; /* ------------------------------------------------------------------ */ /* Types */ diff --git a/src/components/WorkspaceManager.tsx b/src/components/WorkspaceManager.tsx index 7a84a5d..991139d 100644 --- a/src/components/WorkspaceManager.tsx +++ b/src/components/WorkspaceManager.tsx @@ -1,6 +1,7 @@ import { useState, useEffect, useCallback } from "react"; import { invoke } from "@tauri-apps/api/core"; import { useFocusTrap } from "../hooks/useFocusTrap"; +import "../styles/workspace-manager.css"; interface WorkspaceEntry { id: number; diff --git a/src/main.tsx b/src/main.tsx index 9e3182b..d3e4277 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,69 +3,8 @@ import ReactDOM from "react-dom/client"; import App from "./App"; import "./styles.css"; import "./styles/sidebar.css"; -import "./styles/env-panel.css"; import "./styles/terminal.css"; import "./styles/command-palette.css"; -import "./styles/command-bookmarks.css"; -import "./styles/terminal-themes.css"; -import "./styles/task-runner.css"; -import "./styles/task-graph.css"; -import "./styles/app-theme-picker.css"; -import "./styles/github-sidebar.css"; -import "./styles/task-history.css"; -import "./styles/theme-editor.css"; -import "./styles/density-picker.css"; -import "./styles/custom-css-editor.css"; -import "./styles/stash-manager.css"; -import "./styles/blame-view.css"; -import "./styles/branch-compare.css"; -import "./styles/git-hooks.css"; -import "./styles/conflict-resolver.css"; -import "./styles/security-audit.css"; -import "./styles/secret-scanner.css"; -import "./styles/license-report.css"; -import "./styles/security-headers.css"; -import "./styles/test-runner-panel.css"; -import "./styles/coverage-report.css"; -import "./styles/benchmark-dashboard.css"; -import "./styles/docker-panel.css"; -import "./styles/docker-images.css"; -import "./styles/container-monitor.css"; -import "./styles/flaky-tests.css"; -import "./styles/notification-center.css"; -import "./styles/activity-timeline.css"; -import "./styles/plugin-manager.css"; -import "./styles/backup-restore.css"; -import "./styles/analytics-dashboard.css"; -import "./styles/ai-chat.css"; -import "./styles/unified-search.css"; -import "./styles/settings-page.css"; -import "./styles/terminal-recording.css"; -import "./styles/dora-metrics.css"; -import "./styles/webhook-events.css"; -import "./styles/ssh-manager.css"; -import "./styles/git-analytics.css"; -import "./styles/snippet-manager.css"; -import "./styles/env-diff.css"; -import "./styles/app-performance.css"; -import "./styles/file-explorer.css"; -import "./styles/project-overview.css"; -import "./styles/inline-diff.css"; -import "./styles/web-vitals.css"; -import "./styles/plugin-runtime.css"; -import "./styles/dependency-analyzer.css"; -import "./styles/port-scanner.css"; -import "./styles/directory-stats.css"; -import "./styles/tag-manager.css"; -import "./styles/git-log.css"; -import "./styles/workspace-manager.css"; -import "./styles/task-scheduler.css"; -import "./styles/clipboard-history.css"; -import "./styles/todo-panel.css"; -import "./styles/quick-switcher.css"; -import "./styles/error-diagnosis.css"; -import "./styles/browser-events.css"; -import "./styles/database-explorer.css"; import "./styles/dashboard.css"; import "./styles/status-bar.css"; import "./styles/project-tabs.css";