diff --git a/src/app/(routes)/space/[spaceId]/comment/page.tsx b/src/app/(routes)/space/[spaceId]/comment/page.tsx index a1b17a30..c62c5f6a 100644 --- 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 ? ( - + + + ) : ( <> {space && ( diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx index 226c24aa..d28105ba 100644 --- 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 ? ( - + + + ) : ( <> {space && ( diff --git a/src/app/(routes)/space/[spaceId]/setting/page.tsx b/src/app/(routes)/space/[spaceId]/setting/page.tsx index 49585245..89ece630 100644 --- 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 ? ( - + + + ) : (
{space && ( diff --git a/src/app/page.tsx b/src/app/page.tsx index 003f3b2b..1d4d0e4d 100644 --- 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 ? ( - + + + ) : ( <>
diff --git a/src/components/ProfileEditButton/ProfileEditButton.tsx b/src/components/ProfileEditButton/ProfileEditButton.tsx index ca3ce215..e2ff536d 100644 --- 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 }) => { })} ) : ( - + + + ) } diff --git a/src/components/SpaceList/SpaceList.tsx b/src/components/SpaceList/SpaceList.tsx index a183af3a..7abf7ff3 100644 --- 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 ? ( - + + + ) : ( <>
    diff --git a/src/components/UserList/UserList.tsx b/src/components/UserList/UserList.tsx index 623ca1be..6152dad6 100644 --- 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 ? ( - + + + ) : (
      {users?.pages.map((group, i) => ( diff --git a/src/components/common/DeferedComponent/DeferedComponent.tsx b/src/components/common/DeferedComponent/DeferedComponent.tsx new file mode 100644 index 00000000..d1b39efe --- /dev/null +++ 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 index a004433d..3aab552e 100644 --- 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 ? ( - + + + ) : (
        {followList?.pages.map((group, i) => ( diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx index 87aea413..3f181839 100644 --- 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 = ({
)} {(isMetaLoading || isUpdateLinkLoading || isDeleteLinkLoading) && ( - + + + )} )} diff --git a/src/components/common/LinkList/LinkList.tsx b/src/components/common/LinkList/LinkList.tsx index dacc1bed..6a75711e 100644 --- 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 ? ( - + + + ) : ( <>
- {(isMetaLoading || isCreateLinkLoading) && } + {(isMetaLoading || isCreateLinkLoading) && ( + + + + )} )} diff --git a/src/components/common/MainSpaceList/MainSpaceList.tsx b/src/components/common/MainSpaceList/MainSpaceList.tsx index 34a8b4dc..bf34e221 100644 --- 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 ? ( - + + + ) : ( <>
    diff --git a/src/components/common/NotificationList/NotificationList.tsx b/src/components/common/NotificationList/NotificationList.tsx index 7d8faf7c..73114c1a 100644 --- 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 ? ( - + + + ) : (
      {notificationList?.pages[0].responses.length > 0 ? ( diff --git a/src/components/common/Sidebar/Sidebar.tsx b/src/components/common/Sidebar/Sidebar.tsx index fde1b506..e4397855 100644 --- 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) => {
      {currentUser ? ( isSideBarLoading ? ( - + + + ) : ( <>