Merge pull request #231 from kakao-tech-campus-2nd-step3/Weekly

!Hotfix: skeleton ui 적용
kakao-tech-campus-2nd-step3 · Nov 15, 2024 · 11790bb · 11790bb
2 parents f3e3009 + dbe269f
commit 11790bb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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
@@ -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>