I want the cards that are ready to display first, I tried lazy loading my cards, but it's not working, i know that getServerSideProps shows the page when it's ready but i just want to know if there is any other way around it.

the main page where i am fetching the data:

​

const Content: React.FC<ContentProps> = ({ heading, animeResult }) => {
  const [isLoading,setIsLoading] = useState(false)
  const [data,setData] = useState(animeResult)
  const [genreState, setGenreState] = useState<boolean>(false);
  const [mobileVisible, setMobileVisible] = useState<boolean>(false);

//additional functions

  return (
    <>
          {isLoading ? (
            <LoadingPrimary />
          ) : (
            <AnimeCardContainer animeResult={data} />
          )}
       </>
  );
};

export default Content;

export async function getServerSideProps(context: any) {
  const { browse } = context.query;
  try {
    //get anime data
    const animeResponse = await fetch(
      `https://api.jikan.moe/v4/top/anime?filter=${browse === 'top' ? "bypopularity" : "airing"}&sfw`
    );
    const animeData = await animeResponse.json();

    const animeResult = animeData.data;

    const heading = browse === 'top' ? 'Top Anime By Popularity' : "Top This Season"

    return {
      props: {
        animeResult,
        heading
      },
    };
  } catch (err) {
    console.log(err);
    return {
      props: {
        animeResult: null,
      },
    };
  }
}

the cardContainer component:

import { AnimeDetailsProps } from "@/types/animeIntefaces";
import { FC } from "react";

import AnimeCard from "./AnimeCards";

interface AnimeCardContainerProps {
    animeResult: AnimeDetailsProps[];
}

const AnimeCardContainer: FC<AnimeCardContainerProps> = ({ animeResult }) => {

  return (
    <>
      {
        animeResult.length > 0 ?    <div className="grid grid-cols-2   sm:grid-cols-4 gap-x-8 gap-y-16 ">
        {animeResult.map((anime) => (
          <AnimeCard data={anime} key={anime.mal_id} />
        ))}
        </div> :
          <p className="text-purple-500 font-bold text-xl">No Anime Found</p>
   }
    </>
  );
};
 
export default AnimeCardContainer;

​