better app loading progress

packages/web/src/App.svelte

@@ -18,6 +18,7 @@
   import { getConfig, getSettings, getUsedApps } from './utility/metadataLoaders';
   import AppTitleProvider from './utility/AppTitleProvider.svelte';
   import getElectron from './utility/getElectron';
+  import AppStartInfo from './widgets/AppStartInfo.svelte';
 
   let loadedApi = false;
   let loadedPlugins = false;
@@ -80,13 +81,12 @@
     <OpenTabsOnStartup />
     <Screen />
   {:else}
-    <LoadingInfo
+    <AppStartInfo
       message={$loadingPluginStore.loadingPackageName
         ? `Loading plugin ${$loadingPluginStore.loadingPackageName} ...`
         : 'Preparing plugins ...'}
-      wrapper
     />
   {/if}
 {:else}
-  <LoadingInfo message="Starting DbGate ..." wrapper />
+  <AppStartInfo message="Starting DbGate" />
 {/if}

packages/web/src/main.ts

@@ -11,4 +11,6 @@ const app = new App({
   props: {},
 });
 
+// const app = null;
+
 export default app;

packages/web/src/widgets/AppStartInfo.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  export let message;
+</script>
+
+<div class="starting-dbgate">
+  <div class="inner-flex">
+    <div class="lds-ellipsis">
+      <div />
+      <div />
+      <div />
+      <div />
+    </div>
+    <div>{message}</div>
+  </div>
+</div>
+
+<style>
+  .lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-ellipsis div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #000;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  .lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+  @keyframes lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  @keyframes lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+
+  .starting-dbgate {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .inner-flex {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+</style>