From dbe269f85421f90997486f008dbb68a37a03ff72 Mon Sep 17 00:00:00 2001
From: Dobbymin <gmin990624@gmail.com>
Date: Fri, 15 Nov 2024 16:00:59 +0900
Subject: [PATCH] =?UTF-8?q?!Hotfix:=20skeleton=20ui=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/sinitto-name/SinittoName.tsx       | 4 ++--
 src/pages/sinitto/sinitto-main/ui/SinittoMainPage.tsx    | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/pages/sinitto/sinitto-main/components/common/sinitto-name/SinittoName.tsx b/src/pages/sinitto/sinitto-main/components/common/sinitto-name/SinittoName.tsx
index 6e2abcf..21ae099 100644
--- a/src/pages/sinitto/sinitto-main/components/common/sinitto-name/SinittoName.tsx
+++ b/src/pages/sinitto/sinitto-main/components/common/sinitto-name/SinittoName.tsx
@@ -1,5 +1,5 @@
 import { useGetSinittoInfo } from '../../../hooks';
-import { Flex, Text, Spinner } from '@chakra-ui/react';
+import { Flex, Text, Skeleton } from '@chakra-ui/react';
 
 export const SinittoName = () => {
   const { data, isLoading } = useGetSinittoInfo();
@@ -8,7 +8,7 @@ export const SinittoName = () => {
     <Flex w='100%' alignItems='center' mt='var(--space-md)'>
       {isLoading ? (
         <Flex w='100%' justifyContent='left'>
-          <Spinner color='var(--color-primary)' size='md' />
+          <Skeleton height='40px' width='200px' borderRadius='md' />
         </Flex>
       ) : (
         <>
diff --git a/src/pages/sinitto/sinitto-main/ui/SinittoMainPage.tsx b/src/pages/sinitto/sinitto-main/ui/SinittoMainPage.tsx
index 3d978b2..306daa0 100644
--- a/src/pages/sinitto/sinitto-main/ui/SinittoMainPage.tsx
+++ b/src/pages/sinitto/sinitto-main/ui/SinittoMainPage.tsx
@@ -1,11 +1,18 @@
+import { lazy } from 'react';
+
 import {
   CallBackApply,
   HelloCallApply,
   ServiceHistoryButton,
-  SinittoName,
 } from '../components';
 import { PageLayout } from '@/shared';
 
+const SinittoName = lazy(() =>
+  import('../components/common/sinitto-name/SinittoName').then((module) => ({
+    default: module.SinittoName,
+  }))
+);
+
 export const SinittoMainPage = () => {
   return (
     <PageLayout>