From c42c8d4f7b322904066521d363bdcd19b5835f24 Mon Sep 17 00:00:00 2001
From: Stringadmin <admin@omniai.net.cn>
Date: Fri, 5 Jun 2026 19:34:36 +0800
Subject: [PATCH] perf: defer shared utility styles

---
 src/components/DropZone.tsx                     | 1 +
 src/components/EmptyState.tsx                   | 1 +
 src/components/Skeleton.tsx                     | 1 +
 src/components/StudioToolLayout.tsx             | 1 +
 src/features/size-template/SizeTemplatePage.tsx | 1 +
 src/styles/index.css                            | 5 -----
 6 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/DropZone.tsx b/src/components/DropZone.tsx
index 2657238..1f67860 100644
--- a/src/components/DropZone.tsx
+++ b/src/components/DropZone.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useRef, useState, type ReactNode } from "react";
+import "../styles/components/dropzone.css";
 
 interface DropZoneProps {
   accept?: string;
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
index 7610ceb..a67f0fc 100644
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import "../styles/components/empty-state.css";
 
 interface EmptyStateProps {
   icon?: ReactNode;
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
index 491a942..5c6f6ca 100644
--- a/src/components/Skeleton.tsx
+++ b/src/components/Skeleton.tsx
@@ -1,4 +1,5 @@
 import type { CSSProperties } from "react";
+import "../styles/components/skeleton.css";
 
 interface SkeletonProps {
   width?: string | number;
diff --git a/src/components/StudioToolLayout.tsx b/src/components/StudioToolLayout.tsx
index a95e1aa..4b9f59f 100644
--- a/src/components/StudioToolLayout.tsx
+++ b/src/components/StudioToolLayout.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import "../styles/pages/studio-layout.css";
 
 interface StudioToolLayoutProps {
   toolstrip?: ReactNode;
diff --git a/src/features/size-template/SizeTemplatePage.tsx b/src/features/size-template/SizeTemplatePage.tsx
index 93750c3..7651bbc 100644
--- a/src/features/size-template/SizeTemplatePage.tsx
+++ b/src/features/size-template/SizeTemplatePage.tsx
@@ -9,6 +9,7 @@ import {
 import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
 import type { WebViewKey } from "../../types";
 import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "../ecommerce/ImageMentionMenu";
+import "../../styles/pages/size-template.css";
 
 interface SizeTemplatePageProps {
   isAuthenticated?: boolean;
diff --git a/src/styles/index.css b/src/styles/index.css
index 2abf894..278aa7c 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -4,13 +4,8 @@
 @import "./components/primitives.css";
 @import "./components/legacy-components.css";
 @import "./pages/more-tools.css";
-@import "./pages/studio-layout.css";
-@import "./pages/size-template.css";
 @import "./components/recharge-modal.css";
-@import "./components/dropzone.css";
-@import "./components/skeleton.css";
 @import "./components/toast.css";
-@import "./components/empty-state.css";
 @import "./components/page-transition.css";
 @import "./components/motion.css";
 @import "./themes/dark-green.css";