FIX: closes #180 suspense skeleton for search queries

apps/web/src/app/(main)/search/[query]/page.tsx

@@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 sm:p-8">
+    <div className="bg-primary/60 flex flex-col gap-5 sm:p-8" key={query}>
       <h1 className="sm:text-2xl font-bold">Search results</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <SearchResultsTable className="w-full" query={query}/>

apps/web/src/components/SearchResultsTable/index.tsx

@@ -4,6 +4,7 @@ import { DataTable } from "../ui/data-table";
 import { type FC } from "react";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { getBaseURL } from "@/lib/utils";
+import Loading from "@/app/loading";
 
 export interface RelatedQuery {
   type: string,
@@ -22,15 +23,20 @@ interface SearchResultsTableProps {
 }
 
 const SearchResultsTable : FC<SearchResultsTableProps> = ({ className, query }) => {
-  const { data } = useSuspenseQuery({
+  const { data, isFetching } = useSuspenseQuery({
     queryFn: async () => {
       const baseUrl = getBaseURL();
       console.log(`FETCHING: GET /api/search?q=${query}`);
       const data = await fetch(`${baseUrl}/api/search?q=${query}`, { method: "GET" });
       return await data.json();
     },
     queryKey: ["searchResult", query],
-  }) as { data: SearchResult };
+  }) as { data: SearchResult, isFetching: boolean };
+
+  if (isFetching) {
+    // TODO: This just shows why we should have generalized skeletons for different views (tabled results, paginated data, etc);
+    return <Loading/>;
+  }
 
   const relatedVisible = !!data?.related?.at(0);
   const columnVisibility = { "related": relatedVisible };