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 @@