diff --git a/client/src/app/features/search/containers/search-heritage-result-container.tsx b/client/src/app/features/search/containers/search-heritage-result-container.tsx
index 41a5c52..5a45dc3 100644
--- a/client/src/app/features/search/containers/search-heritage-result-container.tsx
+++ b/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) {
diff --git a/client/src/app/features/top/containers/top-page-container.tsx b/client/src/app/features/top/containers/top-page-container.tsx
index 128d33b..f54cbb4 100644
--- a/client/src/app/features/top/containers/top-page-container.tsx
+++ b/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>
       </>
     );
diff --git a/client/src/app/features/top/containers/world-heritage-detail-container.tsx b/client/src/app/features/top/containers/world-heritage-detail-container.tsx
index 0e44ddc..be39a22 100644
--- a/client/src/app/features/top/containers/world-heritage-detail-container.tsx
+++ b/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 (
diff --git a/client/src/shared/uis/Spinner.tsx b/client/src/shared/uis/Spinner.tsx
new file mode 100644
index 0000000..a3d40f6
--- /dev/null
+++ b/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>
+  );
+}