Improve responsive layouts and streamline page loading

components/PageLoading.tsx

@@ -0,0 +1,22 @@
+import { getI18n } from "@/lib/i18n";
+
+export async function PageLoading() {
+  const { t } = await getI18n();
+  return (
+    <main
+      className="section page-content route-loading"
+      aria-busy="true"
+      aria-label={t("Loading page")}
+    >
+      <p role="status" className="muted">
+        {t("Loading page")}…
+      </p>
+      <div className="loading-title loading-surface" aria-hidden="true" />
+      <div className="cards-grid" aria-hidden="true">
+        {[0, 1, 2].map((index) => (
+          <div className="loading-card loading-surface" key={index} />
+        ))}
+      </div>
+    </main>
+  );
+}