Suspense with TRPC server query

import Link from "next/link";
import React, { Suspense } from "react";
import { api } from "~/trpc/server";
import { buttonVariants } from "./ui/button";

interface ChooseBuildingProps {
  departmentId: string;
}

export async function ChooseBuilding({ departmentId }: ChooseBuildingProps) {
  const buildings = await api.building.getBuildings.query();
  return (
    <>
      <div className="pb-12">
      </div>
      <div className="mx-auto flex w-full flex-col justify-center gap-6 md:flex-row">
        <Suspense fallback={<div>Loading ...</div>}>
          {buildings.map((building) => (
            <Link
              href={`/department/${departmentId}/building/${building.id}`}
              key={building.id}
              className={buttonVariants({ variant: "ghost" })}
            >
              {building.name}
            </Link>
          ))}
        </Suspense>
      </div>
    </>
  );
}

import Link from "next/link";
import React, { Suspense } from "react";
import { api } from "~/trpc/server";
import { buttonVariants } from "./ui/button";

interface ChooseBuildingProps {
  departmentId: string;
}

export async function ChooseBuilding({ departmentId }: ChooseBuildingProps) {
  const buildings = await api.building.getBuildings.query();
  return (
    <>
      <div className="pb-12">
      </div>
      <div className="mx-auto flex w-full flex-col justify-center gap-6 md:flex-row">
        <Suspense fallback={<div>Loading ...</div>}>
          {buildings.map((building) => (
            <Link
              href={`/department/${departmentId}/building/${building.id}`}
              key={building.id}
              className={buttonVariants({ variant: "ghost" })}
            >
              {building.name}
            </Link>
          ))}
        </Suspense>
      </div>
    </>
  );
}