feat: #307 로딩바 깜빡이는 이슈 해결

로딩바 깜빡이는 이슈 해결
Team-TenTen · Jul 2, 2024 · 7c60506 · 7c60506
2 parents 8d2b599 + cc5906a
commit 7c60506
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 14 deletions.
diff --git a/src/app/(routes)/space/[spaceId]/comment/page.tsx b/src/app/(routes)/space/[spaceId]/comment/page.tsx
@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form'
 import { Input, Spinner } from '@/components'
 import CommentList from '@/components/CommentList/CommentList'
 import Button from '@/components/common/Button/Button'
+import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
 import LoginModal from '@/components/common/Modal/LoginModal'
 import Space from '@/components/common/Space/Space'
 import useGetSpace from '@/components/common/Space/hooks/useGetSpace'
@@ -49,7 +50,9 @@ const SpaceCommentPage = ({ params }: { params: { spaceId: number } }) => {
   const { Modal, isOpen, modalOpen, modalClose } = useModal()
 
   return isSpaceLoading ? (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   ) : (
     <>
       {space && (

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -2,6 +2,7 @@
 
 import { Dropdown, LinkList, SpaceMemberList, Spinner } from '@/components'
 import Button from '@/components/common/Button/Button'
+import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
 import useViewLink from '@/components/common/LinkList/hooks/useViewLink'
 import Space from '@/components/common/Space/Space'
 import useGetSpace from '@/components/common/Space/hooks/useGetSpace'
@@ -36,7 +37,9 @@ const SpacePage = ({ params }: { params: { spaceId: number } }) => {
   const { tag, tagIndex, handleTagChange } = useTagParam({ tags })
 
   return isSpaceLoading || isTagsLoading ? (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   ) : (
     <>
       {space && (

diff --git a/src/app/(routes)/space/[spaceId]/setting/page.tsx b/src/app/(routes)/space/[spaceId]/setting/page.tsx
@@ -4,6 +4,7 @@ import { SpaceMemberList } from '@/components'
 import { Spinner } from '@/components'
 import SpaceForm from '@/components/Space/SpaceForm'
 import Button from '@/components/common/Button/Button'
+import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
 import useGetSpace from '@/components/common/Space/hooks/useGetSpace'
 import { notify } from '@/components/common/Toast/Toast'
 import { useModal } from '@/hooks'
@@ -23,7 +24,9 @@ const SpaceSettingPage = ({ params }: { params: { spaceId: number } }) => {
   }
 
   return isSpaceLoading ? (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   ) : (
     <div>
       {space && (

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,6 +3,7 @@
 import { CategoryList, Dropdown, LinkItem, Spinner } from '@/components'
 import FloatingButton from '@/components/FloatingButton/FloatingButton'
 import { ChipColors } from '@/components/common/Chip/Chip'
+import DeferredComponent from '@/components/common/DeferedComponent/DeferedComponent'
 import MainSpaceList from '@/components/common/MainSpaceList/MainSpaceList'
 import { useCategoryParam, useSortParam } from '@/hooks'
 import useGetPopularLinks from '@/hooks/useGetPopularLinks'
@@ -23,7 +24,9 @@ export default function Home() {
   return (
     <>
       {isPopularLinksLoading ? (
-        <Spinner />
+        <DeferredComponent>
+          <Spinner />
+        </DeferredComponent>
       ) : (
         <>
           <section className="px-4 pb-8">

diff --git a/src/components/ProfileEditButton/ProfileEditButton.tsx b/src/components/ProfileEditButton/ProfileEditButton.tsx
@@ -6,6 +6,7 @@ import { UserProfileResBody } from '@/types'
 import { cls, getProfileButtonColor, getProfileButtonText } from '@/utils'
 import { useRouter } from 'next/navigation'
 import Button from '../common/Button/Button'
+import DeferredComponent from '../common/DeferedComponent/DeferedComponent'
 import Spinner from '../common/Spinner/Spinner'
 
 const ProfileEditButton = ({ user }: { user: UserProfileResBody }) => {
@@ -48,7 +49,9 @@ const ProfileEditButton = ({ user }: { user: UserProfileResBody }) => {
       })}
     </Button>
   ) : (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   )
 }
 

diff --git a/src/components/SpaceList/SpaceList.tsx b/src/components/SpaceList/SpaceList.tsx
@@ -5,6 +5,7 @@ import { CATEGORIES_RENDER } from '@/constants'
 import useInfiniteScroll from '@/hooks/useInfiniteScroll'
 import { SearchSpaceReqBody, SpaceResBody } from '@/types'
 import { Spinner } from '..'
+import DeferredComponent from '../common/DeferedComponent/DeferedComponent'
 import Space from '../common/Space/Space'
 import { NONE_SEARCH_RESULT } from './constants'
 import useSpacesQuery from './hooks/useSpacesQuery'
@@ -45,7 +46,9 @@ const SpaceList = ({
   const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
 
   return isSpacesLoading ? (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   ) : (
     <>
       <ul className="flex flex-col gap-y-2 px-4 pt-2">

diff --git a/src/components/UserList/UserList.tsx b/src/components/UserList/UserList.tsx
@@ -3,6 +3,7 @@ import { useCurrentUser } from '@/hooks/useCurrentUser'
 import useInfiniteScroll from '@/hooks/useInfiniteScroll'
 import { SearchUserReqBody } from '@/types'
 import { Spinner } from '..'
+import DeferredComponent from '../common/DeferedComponent/DeferedComponent'
 import User from '../common/User/User'
 import useUsersQuery from './hooks/useUsersQuery'
 
@@ -29,7 +30,9 @@ const UserList = ({ keyword, fetchFn }: UserListProps) => {
   const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
 
   return isUserListLoading ? (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   ) : (
     <ul className="flex flex-col gap-y-2 px-4">
       {users?.pages.map((group, i) => (

diff --git a/src/components/common/DeferedComponent/DeferedComponent.tsx b/src/components/common/DeferedComponent/DeferedComponent.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { PropsWithChildren, useEffect, useState } from 'react'
+
+const DeferredComponent = ({ children }: PropsWithChildren) => {
+  const [isDeferred, setIsDeferred] = useState(false)
+  useEffect(() => {
+    const timeOut = setTimeout(() => {
+      setIsDeferred(true)
+    }, 200)
+    return () => clearInterval(timeOut)
+  }, [])
+  if (!isDeferred) return null
+  return <>{children}</>
+}
+
+export default DeferredComponent
diff --git a/src/components/common/FollowList/FollowList.tsx b/src/components/common/FollowList/FollowList.tsx
@@ -3,6 +3,7 @@ import { Spinner } from '@/components'
 import useFollowQuery from '@/components/common/FollowList/hooks/useFollowQuery'
 import useInfiniteScroll from '@/hooks/useInfiniteScroll'
 import { FetchGetFollowProps } from '@/services/user/follow/follow'
+import DeferredComponent from '../DeferedComponent/DeferedComponent'
 import User from '../User/User'
 
 export interface FollowListProps {
@@ -39,7 +40,9 @@ const FollowList = ({
   const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
 
   return isFollowLoading ? (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   ) : (
     <ul className="flex flex-col gap-y-2">
       {followList?.pages.map((group, i) => (

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
@@ -17,6 +17,7 @@ import Avatar from '../Avatar/Avatar'
 import AvatarGroup from '../AvatarGroup/AvatarGroup'
 import Button from '../Button/Button'
 import Chip, { ChipColors } from '../Chip/Chip'
+import DeferredComponent from '../DeferedComponent/DeferedComponent'
 import Input from '../Input/Input'
 import { CreateLinkFormValue, linkViewHistories } from '../LinkList/LinkList'
 import {
@@ -375,7 +376,9 @@ const LinkItem = ({
             </div>
           )}
           {(isMetaLoading || isUpdateLinkLoading || isDeleteLinkLoading) && (
-            <Spinner />
+            <DeferredComponent>
+              <Spinner />
+            </DeferredComponent>
           )}
         </Modal>
       )}

diff --git a/src/components/common/LinkList/LinkList.tsx b/src/components/common/LinkList/LinkList.tsx
@@ -8,6 +8,7 @@ import { GetLinksReqBody } from '@/types'
 import { cls } from '@/utils'
 import Button from '../Button/Button'
 import { ChipColors } from '../Chip/Chip'
+import DeferredComponent from '../DeferedComponent/DeferedComponent'
 import Input from '../Input/Input'
 import LinkItem from '../LinkItem/LinkItem'
 import { Tag } from '../Space/hooks/useGetTags'
@@ -118,7 +119,9 @@ const LinkList = ({
   })
 
   return isLinksLoading ? (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   ) : (
     <>
       <div
@@ -259,7 +262,11 @@ const LinkList = ({
               validation={errors.tagName?.message}
             />
           </div>
-          {(isMetaLoading || isCreateLinkLoading) && <Spinner />}
+          {(isMetaLoading || isCreateLinkLoading) && (
+            <DeferredComponent>
+              <Spinner />
+            </DeferredComponent>
+          )}
         </Modal>
       )}
     </>

diff --git a/src/components/common/MainSpaceList/MainSpaceList.tsx b/src/components/common/MainSpaceList/MainSpaceList.tsx
@@ -7,6 +7,7 @@ import { CATEGORIES_RENDER } from '@/constants'
 import useInfiniteScroll from '@/hooks/useInfiniteScroll'
 import { SearchSpaceReqBody, SpaceResBody } from '@/types'
 import { Spinner } from '../..'
+import DeferredComponent from '../DeferedComponent/DeferedComponent'
 import Space from '../Space/Space'
 
 export interface SpaceListProps {
@@ -48,7 +49,9 @@ const MainSpaceList = ({
   const { target } = useInfiniteScroll({ hasNextPage, fetchNextPage })
 
   return isSpacesLoading ? (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   ) : (
     <>
       <ul className="flex flex-col gap-y-2 px-4 pt-2">

diff --git a/src/components/common/NotificationList/NotificationList.tsx b/src/components/common/NotificationList/NotificationList.tsx
@@ -4,6 +4,7 @@ import { Fragment } from 'react'
 import { Spinner } from '@/components'
 import useInfiniteScroll from '@/hooks/useInfiniteScroll'
 import { InvitationsNotification, InvitationsReqBody } from '@/types'
+import DeferredComponent from '../DeferedComponent/DeferedComponent'
 import Notification from '../Notification/Notification'
 import { NONE_NOTIFICATION_RESULT } from './constants'
 import useAcceptNotification from './hooks/useAcceptNotification'
@@ -30,7 +31,9 @@ const NotificationList = ({ fetchFn, type }: NotificationListProps) => {
   const { handleDeleteNotification } = useDeleteNotification({ type })
 
   return isNotificationLoading ? (
-    <Spinner />
+    <DeferredComponent>
+      <Spinner />
+    </DeferredComponent>
   ) : (
     <ul className="flex flex-col gap-y-2">
       {notificationList?.pages[0].responses.length > 0 ? (

diff --git a/src/components/common/Sidebar/Sidebar.tsx b/src/components/common/Sidebar/Sidebar.tsx
@@ -15,6 +15,7 @@ import { ArchiveBoxIcon, StarIcon } from '@heroicons/react/24/solid'
 import Link from 'next/link'
 import Avatar from '../Avatar/Avatar'
 import Button from '../Button/Button'
+import DeferredComponent from '../DeferedComponent/DeferedComponent'
 import ThemeButton from '../ThemeButton/ThemeButton'
 import { useMySpace } from './hooks/useMySpace'
 import useSidebar from './hooks/useSidebar'
@@ -68,7 +69,9 @@ const Sidebar = ({ isSidebarOpen, onClose }: SidebarProps) => {
         <div className="flex flex-col">
           {currentUser ? (
             isSideBarLoading ? (
-              <Spinner />
+              <DeferredComponent>
+                <Spinner />
+              </DeferredComponent>
             ) : (
               <>
                 <div className="flex items-center px-2">