fix, 로딩이 계속 떠 있는 버그 수정

Team-Crops · Jun 22, 2024 · e6815e0 · e6815e0
1 parent 6002fa0
commit e6815e0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/src/components/templates/TeamRecommend.tsx b/src/components/templates/TeamRecommend.tsx
@@ -5,7 +5,6 @@ import { useCallback, useState } from 'react';
 import { RecommendUserQueryOptions, useRecommendUserQuery } from '#/hooks/use-recommend';
 import { RecommendFilter } from './TeamRecommend/RecommendFilter';
 import { UserCardList } from './TeamRecommend/UserCardList';
-import { Loading } from '../atoms';
 
 export const TeamRecommend = () => {
   const [options, setOptions] = useState<RecommendUserQueryOptions>({
@@ -17,6 +16,7 @@ export const TeamRecommend = () => {
     mutate: mutateCachedUsers,
     isValidating,
     setSize,
+    isLoading,
   } = useRecommendUserQuery(options);
 
   const queryTrigger = useCallback(() => setSize((s) => s + 1), [setSize]);
@@ -46,17 +46,19 @@ export const TeamRecommend = () => {
     [mutateCachedUsers, users]
   );
 
-  if (!users) return <Loading />;
   return (
     <>
       <RecommendFilter defaultOptions={options} trigger={setOptions} />
-      <UserCardList
-        users={users?.flat()}
-        isLoadingUsers={isValidating}
-        hasNext={users[users.length - 1].length > 0}
-        queryTrigger={queryTrigger}
-        mutateCachedLike={mutateCachedLike}
-      />
+      {users && (
+        <UserCardList
+          users={users?.flat()}
+          isLoadingUsers={isValidating}
+          hasNext={users[users.length - 1].length > 0}
+          queryTrigger={queryTrigger}
+          mutateCachedLike={mutateCachedLike}
+          isLoading={isLoading}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/templates/TeamRecommend/UserCardList.tsx b/src/components/templates/TeamRecommend/UserCardList.tsx
@@ -26,6 +26,7 @@ interface UserCardListProps {
     isLiked: boolean | Promise<boolean>,
     optimisticIsLiked: boolean
   ) => void;
+  isLoading: boolean;
 }
 
 export const UserCardList = ({
@@ -34,6 +35,7 @@ export const UserCardList = ({
   hasNext,
   queryTrigger,
   mutateCachedLike,
+  isLoading,
 }: UserCardListProps) => {
   const observerRef = useRef<HTMLDivElement>(null);
 
@@ -74,7 +76,7 @@ export const UserCardList = ({
             mutateCachedLike={mutateCachedLike}
           />
         ))}
-        {hasNext && <Loading ref={observerRef} />}
+        {isLoading && <Loading ref={observerRef} />}
       </GridBlock>
     </>
   );