fix: too many comments in profile page freeze the app

[plebeius-eth]

https://t.me/plebbitjs/30554
https://t.me/seeditreact/6756

[plebeius-eth]

2295599

[estebanabaroa]

you should use url params to set the tabs, this isn't good

  useEffect(() => {
    if (isInProfileUpvotedView) setActiveTab('upvoted');
    else if (isInProfileDownvotedView) setActiveTab('downvoted');
    else if (isInProfileHiddenView) setActiveTab('hidden');
    else if (isInCommentsView) setActiveTab('comments');
    else if (isInSubmittedView) setActiveTab('submitted');
    else setActiveTab('overview');

    setCurrentPage(1); // Reset page when changing tabs
  }, [isInProfileUpvotedView, isInProfileDownvotedView, isInProfileHiddenView, isInCommentsView, isInSubmittedView]);

[estebanabaroa]

you shouldnt calculate everything for all tabs at once

  const upvotedCommentCids = useMemo(() => {
    const allUpvotedCids = accountVotes?.filter((vote) => vote.vote === 1).map((vote) => vote.commentCid) || [];
    return allUpvotedCids.slice(0, currentPage * pageSize);
  }, [accountVotes, currentPage]);

  const downvotedCommentCids = useMemo(() => {
    const allDownvotedCids = accountVotes?.filter((vote) => vote.vote === -1).map((vote) => vote.commentCid) || [];
    return allDownvotedCids.slice(0, currentPage * pageSize);
  }, [accountVotes, currentPage]);

  const hiddenCommentCids = useMemo(() => {
    const allHiddenCids = Object.keys(account?.blockedCids ?? {});
    return allHiddenCids.slice(0, currentPage * pageSize);
  }, [account?.blockedCids, currentPage]);

  const { hasMoreUpvoted, hasMoreDownvoted, hasMoreHidden } = useMemo(() => {
    const allUpvotedCids = accountVotes?.filter((vote) => vote.vote === 1).map((vote) => vote.commentCid) || [];
    const allDownvotedCids = accountVotes?.filter((vote) => vote.vote === -1).map((vote) => vote.commentCid) || [];
    const allHiddenCids = Object.keys(account?.blockedCids ?? {});

you should only do calculation if the user is on the tab, ie, you should use routes like this

const Profile = () => {
  const { t } = useTranslation();
  const account = useAccount();
  const location = useLocation();
  const params = useParams();
  const isMobile = useWindowWidth() < 640;
  // ...

 return (
     <div className={styles.content}>
      <div className={isMobile ? styles.sidebarMobile : styles.sidebarDesktop}>
        <AuthorSidebar />
      </div>
    <Routes>
            <Route path='/profile/upvotes/:page' element={<Upvotes />} />
            <Route path='/profile/downvotes/:page' element={<Downvotes />} />
            // .. etc
     </Routes>

also its probably good to use virtuoso for the accountComments, but the votes and hidden (anything that uses useComments to load) will probably work best with pagination [previous][next] because they are loading progressively so the infinite scroll isnt really gonna work. You actually dont even need to use useComments(), you can just have single component that calls useComment inside, and render an array of components

at some point we need to have a useFeed like hook for votes and hidden but it's complicated to do and low priority as people rarely use these pages

[plebeius-eth]

refactored with virtuoso for account comments, pagination for comments from votes and blocked cids

9434a17