feat: replace plain-text loading states with a Spinner component (#393)

* feat: add Spinner component for loading states

Add a centered spinning-circle component to replace the plain "Loading…"
text currently shown across the top, detail, and search results pages.

* feat: use Spinner for detail page loading state

Replace the plain-text "Loading…" paragraph with the Spinner
component.

* feat: use Spinner for top page loading state

Replace the plain-text "Loading…" div with the Spinner component.

* feat: render Spinner standalone for search results loading state

Previously the loading state rendered the full SearchResultsPage shell
with rangeText="Loading…", which could misleadingly show the "no
sites found" empty state while a request was in flight. Render the
Spinner standalone alongside the search header instead.

Author: zigzagdev

client/src/app/features/search/containers/search-heritage-result-container.tsx

@@ -19,6 +19,7 @@ import { toWorldHeritageListVm } from "@features/heritages/mappers/to-world-heri
 import { HeritageSubHeader } from "@features/top/components/HeritageSubHeader";
 import { DEFAULT_HERITAGE_SEARCH_PARAMS as SEARCH_PARAMS } from "../mapper/search-heritage.types";
 import { useLocale } from "@shared/locale/LocaleHooks";
+import { Spinner } from "@shared/uis/Spinner.tsx";
 
 const fmtRangeText = (pagination: Pagination, count: number): string => {
   if (count === 0) {
@@ -201,7 +202,12 @@ export function SearchHeritageResultsContainer(): React.ReactElement {
   };
 
   if (isLoading) {
-    return <SearchResultsPage {...baseProps} pagination={null} rangeText="Loading…" />;
+    return (
+      <main className="mx-auto max-w-7xl px-4 py-12">
+        {header}
+        <Spinner />
+      </main>
+    );
   }
 
   if (error) {

client/src/app/features/top/containers/top-page-container.tsx

@@ -10,6 +10,7 @@ import { TopPagePagination } from "../components/TopPagePagination";
 import type { IdSortOption } from "../../../../domain/types";
 import { parseHeritageSearchParams } from "@features/search/mapper/search-heritages.params";
 import { DEFAULT_HERITAGE_SEARCH_PARAMS as SEARCH_PARAMS } from "@features/search/mapper/search-heritage.types";
+import { Spinner } from "@shared/uis/Spinner.tsx";
 
 const DEFAULT_TOP_PER_PAGE = 30;
 const DEFAULT_ORDER: IdSortOption = "asc";
@@ -94,7 +95,7 @@ export default function TopPageContainer(): React.ReactElement {
       <>
         {header}
         <main className="p-6">
-          <div>Loading…</div>
+          <Spinner />
         </main>
       </>
     );

client/src/app/features/top/containers/world-heritage-detail-container.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { useWorldHeritageDetail } from "../hooks/use-world-heritage-detail";
 import { HeritageDetailLayout } from "../components/heritage-detail/HeritageDetailLayout";
 import BreadcrumbContext from "@features/breadcrumbs/BreadCrumbProvider";
+import { Spinner } from "@shared/uis/Spinner.tsx";
 
 export function WorldHeritageDetailContainer() {
   const { id } = useParams<{ id: string }>();
@@ -23,7 +24,7 @@ export function WorldHeritageDetailContainer() {
     setLabel("/heritages/:id", label);
   }, [setLabel, isLoading, isError, item?.name]);
 
-  if (isLoading) return <p>Loading…</p>;
+  if (isLoading) return <Spinner />;
 
   if (isError) {
     return (

client/src/shared/uis/Spinner.tsx

@@ -0,0 +1,11 @@
+export function Spinner({ className = "" }: { className?: string }) {
+  return (
+    <div
+      role="status"
+      aria-label="Loading"
+      className={`flex items-center justify-center p-12 ${className}`}
+    >
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-zinc-200 border-t-indigo-600" />
+    </div>
+  );
+}