fix(loader): adds full height loader in option & web

dvcol · dvcol · commit 055671677a36 · 2024-08-26T19:49:10.000+02:00
diff --git a/src/index.html b/src/index.html
@@ -16,7 +16,14 @@
     <meta name="theme-color" content="#80000a" />
   </head>
   <body>
-    <wc-trakt-extension> Loading web component ... </wc-trakt-extension>
+    <wc-trakt-extension>
+      <div id="app-skeleton-container">
+        <div id="app-skeleton-navbar"></div>
+        <div id="app-skeleton-content">
+          <span id="app-skeleton-loader">Loading popup application ...</span>
+        </div>
+      </div>
+    </wc-trakt-extension>
     <script type="module" src="./views/options/main.ts"></script>
   </body>
 </html>
@@ -52,4 +59,25 @@
     flex: 1 1 auto;
     flex-direction: column;
   }
+
+  #app-skeleton-container {
+      height: 100%;
+  }
+
+  #app-skeleton-navbar {
+      width: 100%;
+      height: 44px;
+      background: rgba(0 0 0 / 30%);
+
+      &:hover {
+          background: rgba(0 0 0 / 60%);
+      }
+  }
+
+  #app-skeleton-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: calc(var(--full-height, 100dvh) - 44px)
+  }
 </style>
diff --git a/src/views/options/index.html b/src/views/options/index.html
@@ -6,7 +6,14 @@
     <title>Side Trakt Options</title>
   </head>
   <body>
-    <wc-trakt-extension> Loading options component ... </wc-trakt-extension>
+    <wc-trakt-extension>
+      <div id="app-skeleton-container">
+        <div id="app-skeleton-navbar"></div>
+        <div id="app-skeleton-content">
+          <span id="app-skeleton-loader">Loading popup application ...</span>
+        </div>
+      </div>
+    </wc-trakt-extension>
     <script type="module" src="./main.ts"></script>
   </body>
 </html>
@@ -34,4 +41,25 @@
     flex: 1 1 auto;
     flex-direction: column;
   }
+
+  #app-skeleton-container {
+      height: 100%;
+  }
+
+  #app-skeleton-navbar {
+      width: 100%;
+      height: 44px;
+      background: rgba(0 0 0 / 30%);
+
+      &:hover {
+          background: rgba(0 0 0 / 60%);
+      }
+  }
+
+  #app-skeleton-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: calc(var(--full-height, 100dvh) - 44px)
+  }
 </style>
