Merge pull request 'fix(frontend): prevent calendar loading layout shift' (#29) from fix/calendar-loading-layout-shift into main

Reviewed-on: #29

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">

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);