chore: 친구 찾기에서 친구 추천 스켈레톤 Suspense로 처리

depromeet · Nov 26, 2024 · c01dc4b · c01dc4b
1 parent 9b5d3d4
commit c01dc4b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/features/profile-recommend/components/skeleton/recommended-profile-card-list-skeleton.tsx b/features/profile-recommend/components/skeleton/recommended-profile-card-list-skeleton.tsx
@@ -4,7 +4,8 @@ import { ProfileCardListProps } from '../organisms';
 
 export function RecommendedProfileCardListSkeleton({
   variant = 'horizontal',
-}: Pick<ProfileCardListProps, 'variant'>) {
+  itemStyle,
+}: Pick<ProfileCardListProps, 'variant'> & { itemStyle?: object }) {
   return (
     <>
       <div className={RecommendedProfileCardListSkeletonStyle.title} />
@@ -21,6 +22,7 @@ export function RecommendedProfileCardListSkeleton({
                 variant: variant === 'horizontal' ? 'vertical' : 'horizontal',
               }),
             )}
+            style={itemStyle}
           />
         ))}
       </div>

diff --git a/features/profile-search/components/empty-keyword.tsx b/features/profile-search/components/empty-keyword.tsx
@@ -1,5 +1,12 @@
+import { lazy, Suspense } from 'react';
+
 import { Divider } from '@/components/atoms/divider';
-import { RecommendedProfileItemList } from '@/features/profile-recommend';
+import { RecommendedProfileCardListSkeleton } from '@/features/profile-recommend';
+const RecommendedProfileItemList = lazy(() =>
+  import('@/features/profile-recommend').then((module) => ({
+    default: module.RecommendedProfileItemList,
+  })),
+);
 import { css } from '@/styled-system/css';
 
 export const EmptyKeyword = () => {
@@ -11,7 +18,16 @@ export const EmptyKeyword = () => {
         서로의 기록에 응원을 보내보세요.
       </div>
       <Divider variant="thick" />
-      <RecommendedProfileItemList title="다른 수영인과 응원을 주고 받아보세요" />
+      <Suspense
+        fallback={
+          <RecommendedProfileCardListSkeleton
+            variant="vertical"
+            itemStyle={{ height: '64px' }}
+          />
+        }
+      >
+        <RecommendedProfileItemList title="다른 수영인과 응원을 주고 받아보세요" />
+      </Suspense>
     </>
   );
 };