gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FlightsMap loader: overlay + 60×60 ring with plane glyph (Angular loader-sheet parity)

Browse Source
This commit is contained in:
Anton
2026-04-20 14:33:23 +03:00
parent e66661cee9
commit 0665799555
2 changed files with 56 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/flights-map/components/FlightsMapStartPage.scss
+39 -21
View File
@@ -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
src/features/flights-map/components/FlightsMapStartPage.tsx
+17 -1
View File
@@ -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>
)}