mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-05-01 16:43:59 +00:00
better app loading progress
This commit is contained in:
Jan Prochazka
@@ -1,46 +1,116 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
|
||||||
<head>
|
<title>DbGate</title>
|
||||||
<meta charset='utf-8'>
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="DbGate - web based opensource database administration tool for MS SQL, MySQL, Postgre SQL"
|
||||||
|
/>
|
||||||
|
|
||||||
<title>DbGate</title>
|
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<link rel="manifest" href="manifest.json" />
|
||||||
<meta name="description"
|
|
||||||
content="DbGate - web based opensource database administration tool for MS SQL, MySQL, Postgre SQL" />
|
|
||||||
|
|
||||||
<link rel='icon' type='image/png' href='favicon.ico'>
|
<link rel="stylesheet" href="global.css" />
|
||||||
<link rel="manifest" href="manifest.json" />
|
<link rel="stylesheet" href="dimensions.css" />
|
||||||
|
<link rel="stylesheet" href="bulma.css" />
|
||||||
|
<link rel="stylesheet" href="icon-colors.css" />
|
||||||
|
<link rel="stylesheet" href="build/bundle.css" />
|
||||||
|
<link rel="stylesheet" href="build/fonts/materialdesignicons.css" />
|
||||||
|
<link rel="stylesheet" href="build/diff2html.min.css" />
|
||||||
|
|
||||||
<link rel='stylesheet' href='global.css'>
|
<script defer src="build/bundle.js"></script>
|
||||||
<link rel='stylesheet' href='dimensions.css'>
|
|
||||||
<link rel='stylesheet' href='bulma.css'>
|
|
||||||
<link rel='stylesheet' href='icon-colors.css'>
|
|
||||||
<link rel='stylesheet' href='build/bundle.css'>
|
|
||||||
<link rel='stylesheet' href='build/fonts/materialdesignicons.css'>
|
|
||||||
<link rel='stylesheet' href='build/diff2html.min.css'>
|
|
||||||
|
|
||||||
<script defer src='build/bundle.js'></script>
|
<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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<style>
|
#starting_dbgate_zero {
|
||||||
#starting_dbgate_zero {
|
position: absolute;
|
||||||
position: absolute;
|
left: 0;
|
||||||
left: 0;
|
top: 0;
|
||||||
top: 0;
|
right: 0;
|
||||||
right: 0;
|
bottom: 0;
|
||||||
bottom: 0;
|
display: flex;
|
||||||
display: flex;
|
align-items: center;
|
||||||
align-items: center;
|
justify-content: space-around;
|
||||||
justify-content: space-around;
|
}
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
.inner-flex {
|
||||||
<div id='starting_dbgate_zero'>
|
display: flex;
|
||||||
Loading DbGate App ...
|
align-items: center;
|
||||||
</div>
|
flex-direction: column;
|
||||||
</body>
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="starting_dbgate_zero">
|
||||||
|
<div class="inner-flex">
|
||||||
|
<div class="lds-ellipsis">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div>Loading DbGate App</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -18,6 +18,7 @@
|
|||||||
import { getConfig, getSettings, getUsedApps } from './utility/metadataLoaders';
|
import { getConfig, getSettings, getUsedApps } from './utility/metadataLoaders';
|
||||||
import AppTitleProvider from './utility/AppTitleProvider.svelte';
|
import AppTitleProvider from './utility/AppTitleProvider.svelte';
|
||||||
import getElectron from './utility/getElectron';
|
import getElectron from './utility/getElectron';
|
||||||
|
import AppStartInfo from './widgets/AppStartInfo.svelte';
|
||||||
|
|
||||||
let loadedApi = false;
|
let loadedApi = false;
|
||||||
let loadedPlugins = false;
|
let loadedPlugins = false;
|
||||||
@@ -80,13 +81,12 @@
|
|||||||
<OpenTabsOnStartup />
|
<OpenTabsOnStartup />
|
||||||
<Screen />
|
<Screen />
|
||||||
{:else}
|
{:else}
|
||||||
<LoadingInfo
|
<AppStartInfo
|
||||||
message={$loadingPluginStore.loadingPackageName
|
message={$loadingPluginStore.loadingPackageName
|
||||||
? `Loading plugin ${$loadingPluginStore.loadingPackageName} ...`
|
? `Loading plugin ${$loadingPluginStore.loadingPackageName} ...`
|
||||||
: 'Preparing plugins ...'}
|
: 'Preparing plugins ...'}
|
||||||
wrapper
|
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<LoadingInfo message="Starting DbGate ..." wrapper />
|
<AppStartInfo message="Starting DbGate" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -11,4 +11,6 @@ const app = new App({
|
|||||||
props: {},
|
props: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// const app = null;
|
||||||
|
|
||||||
export default app;
|
export default app;
|
||||||
|
|||||||
90
packages/web/src/widgets/AppStartInfo.svelte
Normal file
90
packages/web/src/widgets/AppStartInfo.svelte
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user