loader

src/pages/Infra2Page.tsx

@@ -22,6 +22,7 @@ function Infra2Page() {
   const [filteredMarks, setFilteredMarks] = useState(marks);
   const [filteredTransportMarks, setFilteredTransportMarks] =
     useState(transportMarks);
+  const [isLoaded, setIsLoaded] = useState(false);
   const navigate = useNavigate();
 
   function handleResize() {
@@ -35,6 +36,12 @@ function Infra2Page() {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  function handleOnImageLoad(
+    event: React.SyntheticEvent<HTMLImageElement, Event>
+  ): void {
+    setIsLoaded(true);
+  }
+
   return (
     <div className="scene absolute w-full h-full overflow-hidden">
       <div
@@ -47,6 +54,7 @@ function Infra2Page() {
           src="/images/Infra/InfraOrto.jpg"
           alt=""
           className=""
+          onLoad={handleOnImageLoad}
         />
         <MarksContainer
           filteredTransportMarks={filteredTransportMarks}
@@ -57,7 +65,7 @@ function Infra2Page() {
 
         <DistanceCircle selectedRange={selectedRange} />
       </div>
-      <div className="absolute h-screen overflow-y-auto top-0 left-0 z-[99999999] w-[260px] bg-[#002347] bg-opacity-90 select-none px-6 py-5 flex flex-col justify-between gap-8">
+      <div className="absolute h-screen overflow-y-auto top-0 left-0 z-[999999] w-[260px] bg-[#002347] bg-opacity-90 select-none px-6 py-5 flex flex-col justify-between gap-8">
         <div className="flex flex-col gap-3">
           {/* <div className="flex justify-end">
             <CrossIcon />
@@ -81,6 +89,13 @@ function Infra2Page() {
       <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
         <ComplexIcon />
       </div>
+      {!isLoaded && (
+        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-neutral-950 z-[99999999]">
+          <h2 className="text-2xl font-tenor text-white whitespace-nowrap">
+            Загрузка...
+          </h2>
+        </div>
+      )}
     </div>
   );
 }