romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2024-11-22 10:25:48 +01:00
Code Issues Releases Activity

Started work on loading indicator...

Browse Source
This commit is contained in:
Romein van Buren 2023-02-14 16:18:35 +01:00
parent c8ac910de4
commit f606a4807c
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
5 changed files with 71 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/index.html
View File

@ -7,6 +7,14 @@
</head>
<body>
<div id="app"></div>
<div id="app-loading">
<div class="ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script src="./src/main.js" type="module"></script>
</body>
</html>

4
frontend/src/app.svelte
View File

@ -4,7 +4,7 @@
import About from './organisms/about/index.svelte';
import Connection from './organisms/connection/index.svelte';
import Settings from './organisms/settings/index.svelte';
import { applicationSettings, connections, contextMenu, environment } from './stores';
import { applicationInited, connections, contextMenu, environment } from './stores';
const hosts = {};
const activeHostKey = '';
@ -27,7 +27,7 @@
<div id="root" class="platform-{$environment?.platform}">
<div class="titlebar"></div>
{#if $environment && $applicationSettings}
{#if $applicationInited}
<main class:empty={!host || !connection}>
<Connection {hosts} bind:activeCollKey bind:activeDbKey {activeHostKey} />
</main>

50
frontend/src/loading.css Normal file
View File

@ -0,0 +1,50 @@
#app-loading {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
}
/* Source of the following CSS: https://loading.io/css/ (modified) */
#app-loading .ring {
display: inline-block;
position: relative;
width: 136px;
height: 136px;
margin: auto;
}
#app-loading .ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 120px;
height: 120px;
margin: 8px;
border: 8px solid;
border-radius: 50%;
animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #f1dac8 transparent transparent transparent;
}
#app-loading .ring div:nth-child(1) {
animation-delay: -0.45s;
}
#app-loading .ring div:nth-child(2) {
animation-delay: -0.3s;
}
#app-loading .ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes loading-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

1
frontend/src/main.js
View File

@ -1,5 +1,6 @@
import './reset.css';
import './style.css';
import './loading.css';
import App from './app.svelte';
import { LogError } from '../wailsjs/runtime/runtime';

11
frontend/src/stores.js
View File

@ -1,4 +1,4 @@
import { writable } from 'svelte/store';
import { derived, writable } from 'svelte/store';
import { Environment, Settings, UpdateSettings, UpdateViewStore, Views } from '../wailsjs/go/app/App';
export const busy = (() => {
@ -106,3 +106,12 @@ export const views = (() => {
return { reload, set, subscribe, forCollection };
})();
export const applicationInited = derived([ environment, applicationSettings ], ([ env, settings ], set) => {
if (env && settings) {
set(true);
// Remove loading spinner.
// document.getElementById('app-loading')?.remove();
}
}, false);