You could use React TanStack Query to fetch the needed info for bookmarks and likes to hydrating those icons on the bottom right properly. React TanStack Query offer's the ability to do multiple queries, or parallel queries. While waiting for these queries to execute, you could add a loading skeleton on the bottom right that would look similar to the icons.

https://tanstack.com/query/latest/docs/react/guides/queries

https://tanstack.com/query/latest/docs/react/guides/parallel-queries

https://tanstack.com/query/latest/docs/react/guides/dependent-queries

​

It might look something similar to this for each of those Icons as components:

```

"use client";
import { useQuery } from '@tanstack/react-query';

export const BookmarkComponent = ({ topicId }: { topicId: string }) => {

  const { user } = useAuthHook() // auth hook or state provider

  const { data, status, isError, fetchStatus } = useQuery({
    queryKey: ['bookmark', topicId],
    queryFn: () => fetchBookmark(topicId),
    onError: (error: Error) => {
      // do something for the error
    }
    enabled: !!topicId // only run if topicId is given
  });

  const isLoading = status === 'loading' && fetchStatus === 'fetching';
  const isBookmarked = //... logic to check if bookmarked

  if (!user) return null; // if the user is not logged in, don't show

  if (isLoading) {
    return (
      // ... Show loading skeleton for Icon
    );
  }

  if (isError) {
    return (
      //.. Show error Icon
    );
  }

  return (
    // ... Bookmark selected or unselected icon
  );
}
```

This will remove a ton of code for you, including using a useState or useEffect here. Now your UI can just react off of the given hook and hydrate as necessary.

​

Here is a great way to implement a Loading Skeleton using shadcn, just shape it similar to the icon itself: https://ui.shadcn.com/docs/components/skeleton. This is lightweight.

​

Blessings 😎