From 06657995550b9dc07964afb4d0d789cb2ce89527 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 14:33:23 +0300
Subject: [PATCH] =?UTF-8?q?FlightsMap=20loader:=20overlay=20+=2060=C3=9760?=
 =?UTF-8?q?=20ring=20with=20plane=20glyph=20(Angular=20loader-sheet=20pari?=
 =?UTF-8?q?ty)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FlightsMapStartPage.scss       | 60 ++++++++++++-------
 .../components/FlightsMapStartPage.tsx        | 18 +++++-
 2 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/src/features/flights-map/components/FlightsMapStartPage.scss b/src/features/flights-map/components/FlightsMapStartPage.scss
index f48fb2fe..b8f037a4 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.scss
+++ b/src/features/flights-map/components/FlightsMapStartPage.scss
@@ -97,50 +97,68 @@
     }
   }
 
-  // Inline loader matching Angular loader-sheet component
+  // Mirrors Angular `loader-sheet.component.scss` 1:1: 60×60 ring loader
+  // in brand blue ($extra-blue/#2b62ab), a rotating half-mask for the
+  // animated arc, and a plane glyph in the center.
   .page-loader__loader {
     position: relative;
-    width: 120px;
-    height: 120px;
-    transform: scale(0.5);
+    width: 60px;
+    height: 60px;
+    color: #2b62ab;
 
     .loader-circle {
       position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 120px;
-      height: 120px;
+      inset: 0;
+      margin: 0;
+      width: 60px;
+      height: 60px;
       border-radius: 50%;
-      box-shadow: inset 0 0 0 3px colors.$blue-light;
-      margin-left: -60px;
-      margin-top: -60px;
+      box-shadow: inset 0 0 0 2px currentColor;
     }
 
     .loader-line-mask {
       position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 60px;
-      height: 120px;
-      margin-left: -60px;
-      margin-top: -60px;
+      inset: 0;
+      width: 30px;
+      height: 60px;
+      margin: 0;
       overflow: hidden;
-      transform-origin: 60px 60px;
+      transform-origin: 30px 30px;
       animation: flights-map-rotate 1.2s infinite linear;
 
       .loader-line {
-        width: 120px;
-        height: 120px;
+        width: 60px;
+        height: 60px;
         border-radius: 50%;
-        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5);
+        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
       }
     }
 
+    svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
     @keyframes flights-map-rotate {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
   }
+
+  // Mirrors Angular `loader-sheet` host: translucent overlay that
+  // covers the map container while the API request is in-flight.
+  .loading-sheet {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(180, 180, 180, 0.302);
+    z-index: 1000;
+    pointer-events: all;
+  }
 }
 
 // Filter panel styling for content-left column
diff --git a/src/features/flights-map/components/FlightsMapStartPage.tsx b/src/features/flights-map/components/FlightsMapStartPage.tsx
index b298be90..d4239ce3 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.tsx
+++ b/src/features/flights-map/components/FlightsMapStartPage.tsx
@@ -347,8 +347,10 @@ export const FlightsMapStartPage: FC<FlightsMapStartPageProps> = ({
             </ClientOnly>
 
             {(loading || dictionariesLoading) && (
+              // Mirrors Angular `loader-sheet` — translucent overlay with
+              // a 60×60 ring loader centered on a plane glyph.
               <div
-                className="flights-map-start__loader"
+                className="loading-sheet"
                 aria-busy="true"
                 data-testid="map-loader"
               >
@@ -357,6 +359,20 @@ export const FlightsMapStartPage: FC<FlightsMapStartPageProps> = ({
                   <div className="loader-line-mask">
                     <div className="loader-line" />
                   </div>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 33.795 32.307"
+                    aria-hidden="true"
+                  >
+                    <path
+                      id="plane_afl_small"
+                      d="M20.824,12.956c0,.388,0,.823,0,1.29L35.729,26.527l.007,1.633-15.1-7.255a70.654,70.654,0,0,1-.947,9.23l6.09,3.575.011.462-6.457-2.2c-.139.5-.276.788-.426.785a.561.561,0,0,1-.437-.774,35.562,35.562,0,0,0-6.415,2.288l-.006-.469,6.037-3.658a71.009,71.009,0,0,1-1.149-9.227L1.96,28.408l-.02-1.627,14.708-12.5c-.011-.469-.015-.9-.019-1.291-.048-6.082.858-11.015,2.014-11.021s2.138,4.91,2.18,10.99"
+                      transform="translate(36,-2) rotate(90)"
+                      fill="currentColor"
+                    />
+                  </svg>
                 </div>
               </div>
             )}