diff --git a/apps/web/src/app/(main)/search/[query]/page.tsx b/apps/web/src/app/(main)/search/[query]/page.tsx index d3836ac..814a234 100644 --- a/apps/web/src/app/(main)/search/[query]/page.tsx +++ b/apps/web/src/app/(main)/search/[query]/page.tsx @@ -28,7 +28,7 @@ const Page : FC = ({ params }) => { }); return ( -
+

Search results

diff --git a/apps/web/src/components/SearchResultsTable/index.tsx b/apps/web/src/components/SearchResultsTable/index.tsx index de05b49..29d1d47 100644 --- a/apps/web/src/components/SearchResultsTable/index.tsx +++ b/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,7 +23,7 @@ interface SearchResultsTableProps { } const SearchResultsTable : FC = ({ className, query }) => { - const { data } = useSuspenseQuery({ + const { data, isFetching } = useSuspenseQuery({ queryFn: async () => { const baseUrl = getBaseURL(); console.log(`FETCHING: GET /api/search?q=${query}`); @@ -30,7 +31,12 @@ const SearchResultsTable : FC = ({ className, query }) 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 ; + } const relatedVisible = !!data?.related?.at(0); const columnVisibility = { "related": relatedVisible };