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 };