Merge branch 'develop' into issues/6503/displayCNSon4k

src/components/Common/Loading.tsx

@@ -1,16 +1,41 @@
-const img = "/images/care_logo_gray.svg";
+import { useEffect, useRef, useState } from "react";
 
 const Loading = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [offsetTop, setOffsetTop] = useState(0);
+
+  useEffect(() => {
+    const calculateOffset = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setOffsetTop(rect.top);
+      }
+    };
+
+    calculateOffset();
+
+    window.addEventListener("resize", calculateOffset);
+    window.addEventListener("scroll", calculateOffset, true);
+
+    return () => {
+      window.removeEventListener("resize", calculateOffset);
+      window.removeEventListener("scroll", calculateOffset, true);
+    };
+  }, []);
+
   return (
-    <div className="grid">
-      <div className="col-span-12 flex items-center justify-center sm:col-span-12 md:col-span-12 lg:col-span-12">
-        <div className="App">
-          <header className="App-header">
-            <img src={img} className="App-logo" alt="logo" />
-          </header>
-        </div>
-      </div>
+    <div
+      ref={containerRef}
+      className="flex w-full items-center justify-center transition-[height]"
+      style={{ height: `calc(100vh - ${offsetTop}px)` }}
+    >
+      <img
+        src="/images/care_logo_gray.svg"
+        className="App-logo"
+        alt="loading"
+      />
     </div>
   );
 };
+
 export default Loading;