add preloader to app

2024-12-15 11:11:35 +02:00
parent 714f5b7b51
commit ae5da9f6d7
4 changed files with 23 additions and 4 deletions
@@ -11,9 +11,15 @@
    <meta name="apple-mobile-web-app-title" content="НаСвязи">
    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)" />
+    <link rel="stylesheet" href="/css/preloader.css" />
  </head>
-  <body>
-    <div id="app"></div>
+  <body class="preloader">
+    <div id="loader">
+      <div class="spinner"></div>
+    </div>
+
+    <div id="app">
+    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
@@ -1,5 +1,9 @@
 /* Общие стили */
-body {
+body.preloader #app {
+  display: none;
+}
+
+body.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
@@ -9,6 +13,11 @@ body {
 }

 #loader {
+  display: none;
+}
+
+body.preloader #loader {
+  display: block;
  text-align: center;
  padding: 7.5vh 7.5vw;
 }
@@ -8,7 +8,7 @@
  <title>Загрузка… — НаСвязи</title>
  <link rel="stylesheet" href="/css/preloader.css" />
 </head>
-<body>
+<body class="preloader">
 <div id="loader">
  <div id="offline-message" style="display: none;">
    <h1>Нет подключения к интернету</h1>
@@ -139,4 +139,8 @@ const router = createRouter({
  },
 })

+router.isReady().then(() => {
+  document.body.classList.remove('preloader')
+})
+
 export default router