diff --git a/src/app/routes/trade.$ticker.tsx b/src/app/routes/trade.$ticker.tsx
index fbe532b..eb79baa 100644
--- a/src/app/routes/trade.$ticker.tsx
+++ b/src/app/routes/trade.$ticker.tsx
@@ -1,6 +1,6 @@
import * as cookie from 'cookie';
import { AnimatePresence } from 'motion/react';
-import { useState } from 'react';
+import { Suspense, lazy, useState } from 'react';
import { Outlet, redirect } from 'react-router';
import { CoinPriceWithName, api as coinApi } from '~/entities/coin';
@@ -10,13 +10,15 @@ import { CoinListWithSearchBar } from '~/features/coin-search-list';
import { OrderForm, OrderFormFallback } from '~/features/order';
import { ExecutionList } from '~/features/order-execution-list';
import useTradeNotification from '~/features/trade/hooks/useTradeNotification';
-import { Orderbook, StockChart } from '~/features/tradeview';
import Container from '~/shared/ui/Container';
import ContainerTitle from '~/shared/ui/ContainerTitle';
import { NavBar, SideBar } from '~/widgets/navbar';
import { useUserId } from '../provider/UserInfoProvider';
import type { Route } from './+types/trade.$ticker';
+const LazyStockChart = lazy(() => import('~/features/tradeview/ui/StockChart'));
+const LazyOrderBook = lazy(() => import('~/features/tradeview/ui/Orderbook'));
+
export async function loader({ request, params }: Route.LoaderArgs) {
const rawCookie = request.headers.get('Cookie');
const cookies = cookie.parse(rawCookie || '');
@@ -79,12 +81,14 @@ export default function TradeRouteComponent({
실시간 차트
- {coinInfo && (
-
- )}
+
+ {coinInfo && (
+
+ )}
+
@@ -100,7 +104,9 @@ export default function TradeRouteComponent({
실시간 호가
- {coinInfo && }
+
+ {coinInfo && }
+
diff --git a/src/features/chat/ui/AIChatBot/index.tsx b/src/features/chat/ui/AIChatBot/index.tsx
index b2d6c95..43a66d0 100644
--- a/src/features/chat/ui/AIChatBot/index.tsx
+++ b/src/features/chat/ui/AIChatBot/index.tsx
@@ -1,13 +1,20 @@
import { useMachine } from '@xstate/react';
import { AnimatePresence } from 'motion/react';
-import { type ChangeEvent, type FormEvent, useState } from 'react';
+import {
+ type ChangeEvent,
+ type FormEvent,
+ Suspense,
+ lazy,
+ useState,
+} from 'react';
import useScrollToBottom from '~/shared/hooks/useScrollToBottom';
import { chatMachine } from '../../model/chat.machine';
import ChatButton from '../ChatButton';
-import ChatWindow from '../ChatWindow';
import MessageBox from '../MessageBox';
+const LazyChatWindow = lazy(() => import('~/features/chat/ui/ChatWindow'));
+
export default function AIChatBot() {
const [state, send] = useMachine(chatMachine);
const [isOpen, setIsOpen] = useState(false);
@@ -32,30 +39,32 @@ export default function AIChatBot() {
return (
- {isOpen ? (
-
- {state.context.messageList.map((message, index) => {
- const key = `msg-${index}-${message.isMine ? 'user' : 'ai'}`;
- return (
-
- );
- })}
-
-
- ) : (
-
- )}
+
+ {isOpen ? (
+
+ {state.context.messageList.map((message, index) => {
+ const key = `msg-${index}-${message.isMine ? 'user' : 'ai'}`;
+ return (
+
+ );
+ })}
+
+
+ ) : (
+
+ )}
+
);
}
diff --git a/stats.html b/stats.html
index eefae3a..b527ac8 100644
--- a/stats.html
+++ b/stats.html
@@ -4929,7 +4929,7 @@