fix(shell): adds loading indicator delay to shell skeleton

Author: dvcol

env.d.ts

@@ -3,6 +3,7 @@ interface ImportMeta {
   env: {
     PKG_VERSION: string;
     PKG_NAME: string;
+
     VITE_BASE?: string;
     VITE_WEB?: boolean;
     VITE_SOURCEMAP?: boolean;

src/components/AppComponent.vue

@@ -216,6 +216,16 @@ const onBack = () => {
     &-content {
       margin-top: -1.125rem;
       padding: 0 3rem 1.25rem;
+
+      :deep(.n-skeleton) {
+        opacity: 1;
+        transition: opacity 0.1s ease-in 0.1s;
+
+        /* Adds 0.2s delay and 1s transition to loading indicator to prevent flashing */
+        @starting-style {
+          opacity: 0;
+        }
+      }
     }
   }
 }

src/components/common/loading/PageLoading.vue

@@ -20,5 +20,12 @@ import IconLoadingMatrix from '~/components/icons/IconLoadingMatrix.vue';
   width: 100%;
   height: 100%;
   padding-bottom: layout.$header-navbar-height;
+  opacity: 1;
+  transition: opacity 1s ease-in 0.2s;
+
+  /* Adds 0.2s delay and 1s transition to loading indicator to prevent flashing */
+  @starting-style {
+    opacity: 0;
+  }
 }
 </style>

src/index.html

@@ -271,13 +271,11 @@
 </html>
 
 <style>
-  html {
-    overscroll-behavior: none;
-  }
-
+  html,
   body {
     overscroll-behavior: none;
     display: flex;
+    flex-direction: column;
     margin: 0;
     color: rgb(235 235 235 / 64%);
     font-size: 1rem;
@@ -306,6 +304,13 @@
       --skeleton-navbar-height: 44px;
 
       height: 100%;
+      opacity: 1;
+      transition: opacity 1s ease-in 0.2s;
+
+      /* Adds 0.2s delay and 1s transition to loading indicator to prevent flashing */
+      @starting-style {
+          opacity: 0;
+      }
   }
 
   #app-skeleton-navbar {

src/views/options/index.html

@@ -257,9 +257,11 @@
 </html>
 
 <style>
+  html,
   body {
     overscroll-behavior: none;
     display: flex;
+    flex-direction: column;
     margin: 0;
     color: rgb(235 235 235 / 64%);
     font-size: 1rem;
@@ -284,6 +286,13 @@
       --skeleton-navbar-height: 44px;
 
       height: 100%;
+      opacity: 1;
+      transition: opacity 1s ease-in 0.2s;
+
+      /* Adds 0.2s delay and 1s transition to loading indicator to prevent flashing */
+      @starting-style {
+          opacity: 0;
+      }
   }
 
   #app-skeleton-navbar {

src/views/options/main.ts

@@ -1,5 +1,5 @@
 import defineComponent from '~/web/define-component';
 
-defineComponent({ baseUrl: import.meta.env.VITE_BASE, view: { option: true } })
+defineComponent({ baseUrl: import.meta.env.VITE_BASE, view: { option: true, web: import.meta.env.VITE_WEB } })
   .then(() => console.info('Web Component defined', import.meta.env))
   .catch(err => console.error('Failed to define component', err));

src/views/popup/index.html

@@ -301,6 +301,13 @@
     --skeleton-navbar-height: 44px;
 
     height: 100%;
+    opacity: 1;
+    transition: opacity 1s ease-in 0.2s;
+
+    /* Adds 0.2s delay and 1s transition to loading indicator to prevent flashing */
+    @starting-style {
+        opacity: 0;
+    }
   }
 
   #app-skeleton-navbar {

src/views/popup/main.ts

@@ -8,7 +8,7 @@ const resizeContainer = () => {
   root.style.height = `${window.innerHeight}px`;
 };
 
-defineComponent({ baseUrl: import.meta.env.VITE_BASE, view: { popup: true } })
+defineComponent({ baseUrl: import.meta.env.VITE_BASE, view: { popup: true, web: import.meta.env.VITE_WEB } })
   .then(() => {
     resizeContainer();
     console.info('Web Component defined');

src/web/define-component.ts

@@ -3,7 +3,7 @@ export enum WebComponents {
 }
 
 export type DefineOption = { baseName?: string; baseUrl?: string; view?: { option?: boolean; popup?: boolean; web?: boolean } };
-export type DefineComponent = (options?: DefineOption, component?: WebComponents) => void;
+export type DefineComponent = (options?: DefineOption, component?: WebComponents) => Promise<CustomElementConstructor>;
 
 export const defineComponent = async (options: DefineOption = {}, component: WebComponents = WebComponents.TraktExtension) => {
   if (customElements.get(component)) {
@@ -14,6 +14,7 @@ export const defineComponent = async (options: DefineOption = {}, component: Web
     const TraktExtensionWc = createElementInstance(ContainerComponent, { name: component, ...options });
     customElements.define(component, TraktExtensionWc);
   }
+  return customElements.whenDefined(component);
 };
 
 export default defineComponent;