From f7b611bbbec3123069dcc01a9ebb6f4dddddf472 Mon Sep 17 00:00:00 2001
From: Anton <vakabunga@proton.me>
Date: Mon, 27 Apr 2026 14:02:20 +0300
Subject: [PATCH] fix(frontend): prevent calendar loading layout shift

---
 frontend/src/pages/RacesPage.tsx | 42 +++++++++++++++++++++-----------
 frontend/src/styles/global.css   | 19 +++++++++++++++
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/RacesPage.tsx b/frontend/src/pages/RacesPage.tsx
index 515da89..34e12fc 100644
--- a/frontend/src/pages/RacesPage.tsx
+++ b/frontend/src/pages/RacesPage.tsx
@@ -228,6 +228,25 @@ export function RacesPage(): JSX.Element {
     }),
     [races],
   );
+  const statusMessage = useMemo(() => {
+    if (errorMessage && !isLoading) {
+      return errorMessage;
+    }
+    if (isLoading) {
+      return "Загружаем данные...";
+    }
+    if (viewMode === "calendar" && monthFilter === "") {
+      return "Выберите месяц, чтобы увидеть его крупным планом.";
+    }
+    return "";
+  }, [errorMessage, isLoading, monthFilter, viewMode]);
+  const statusClassName = [
+    "races-status__message",
+    !statusMessage ? "races-status__message--empty" : "",
+    errorMessage && !isLoading ? "races-status__message--error" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   if (errorMessage && races.length === 0 && !isLoading) {
     return (
@@ -301,21 +320,16 @@ export function RacesPage(): JSX.Element {
         </div>
       </section>
 
-      {errorMessage && !isLoading ? (
-        <p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
-          {errorMessage}
+      <div className="races-status" aria-live="polite">
+        <p
+          className={statusClassName}
+          role={errorMessage && !isLoading ? "alert" : undefined}
+          aria-busy={isLoading || undefined}
+          aria-hidden={!statusMessage || undefined}
+        >
+          {statusMessage || "\u00a0"}
         </p>
-      ) : null}
-
-      {viewMode === "calendar" && monthFilter === "" ? (
-        <p className="page__subtitle races-cal__filter-hint">Выберите месяц, чтобы увидеть его крупным планом.</p>
-      ) : null}
-
-      {isLoading ? (
-        <p className="page__subtitle" aria-busy="true">
-          Загружаем данные...
-        </p>
-      ) : null}
+      </div>
 
       {viewMode === "list" ? (
         <div className="race-lists">
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 36d58a4..28d5698 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -967,6 +967,25 @@ a {
   margin-top: var(--space-6);
 }
 
+.races-status {
+  min-height: calc(var(--line-height-base) * var(--font-size-caption));
+  margin-top: var(--space-4);
+}
+
+.races-status__message {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-caption);
+}
+
+.races-status__message--empty {
+  visibility: hidden;
+}
+
+.races-status__message--error {
+  color: var(--color-danger);
+}
+
 .races-cal__filter-hint {
   margin-top: var(--space-3);
   color: var(--color-text-muted);
-- 
2.49.1