I have a dashboard page that retrieves users Guilds from the Discord API. The API has a 700ms response time, which is too long to wait for the data before rendering the page. I tried using suspense, but it still waited for the data to arrive before showing the skeleton component. What can I do to show a skeleton component immediately and then replace it with the data once it's fetched?

//page.js
import MyServer from "./myServers";
import { Suspense } from "react";
import Skeleton from "./Skeleton";

export const dynamic = "force-dynamic";

const DashBoard = async () => {
  return (
    <>
      <Suspense fallback={<Skeleton />}>
        <MyServer />
      </Suspense>
    </>
  );
};

export default DashBoard;

// myServer.js
import { getUser } from "@/app/utilities/getUser";
import { cookies } from "next/headers";
import { permanentRedirect } from "next/navigation";
import "./dashboard.css";

export const dynamic = "force-dynamic";

const MyServer = async () => {
  async function getUserGuilds() {
    try {
      const data = await fetch("https://discord.com/api/users/@me/guilds", {
        headers: {
          Authorization: `Bearer ${User.accessToken}`,
        },
        cache: "no-store",
      });
      return data.json();
    } catch (err) {
      return null; 
    }
  }

  

  const cookieStore = cookies();
  const sessionid = cookieStore.get("sessionid");

  const User = await getUser(sessionid);

  if (!User) {
    return permanentRedirect(process.env.NEXT_PUBLIC_OAUTH_URL);
  }

  const servers = await getUserGuilds();

  console.log(servers);

  return (
    <>
      <h1>My Servers</h1>
      <div className="server-container">
        {servers?.map((server) => (
          <div key={server.id} className="server">
            <img
              src={`https://cdn.discordapp.com/icons/${server.id}/${server.icon}`}
              alt=""
            />
            <h2 className="server-name">{server.name}</h2>
          </div>
        ))}
      </div>
    </>
  );
};

export default MyServer;