hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

frontend: add loading screen for initially loading the js and connecting to the gateway

Browse source
This commit is contained in:
hippoz 2022-04-17 20:23:20 +03:00
parent 541464cdd9
commit 304cef3c11
No known key found for this signature in database
GPG key ID: 7C52899193467641
6 changed files with 103 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/public/global.css
View file

@ -39,6 +39,16 @@ body {
line-height: 1.75;
}
.pre--loading-screen {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: var(--background-color-1);
}
.h1 {
font-size: 2.488rem;
}

1
frontend/public/index.html
View file

@ -13,5 +13,6 @@
</head>
<body>
<div class="pre--loading-screen" id="pre--loading-screen">heating up the crt...</div>
</body>
</html>

32
frontend/src/components/pages/main/Main.svelte
View file

@ -1,8 +1,9 @@
<script>
import ChannelView from "./ChannelView.svelte";
import Sidebar from "./Sidebar.svelte";
import { gatewayStatus } from "../../../stores";
import ChannelView from "./ChannelView.svelte";
import Sidebar from "./Sidebar.svelte";
</script>
<style>
.flex-container {
width: 100vw;
@ -10,10 +11,25 @@ import Sidebar from "./Sidebar.svelte";
display: flex;
flex-direction: row;
}
.loading-screen {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: var(--background-color-1);
}
</style>
<div class="flex-container">
<Sidebar />
<ChannelView channel={{ name: "channel name" }} />
</div>
{#if $gatewayStatus.ready}
<div class="flex-container">
<Sidebar />
<ChannelView channel={{ name: "channel name" }} />
</div>
{:else}
<div class="loading-screen">
connecting...
</div>
{/if}

3
frontend/src/gateway.js
View file

@ -25,6 +25,7 @@ export const GatewayEventType = {
export default {
ws: null,
authenticated: false,
open: false,
heartbeatInterval: null,
user: null,
channels: null,
@ -43,6 +44,7 @@ export default {
if (this.reconnectTimeout) {
clearTimeout(this.reconnectTimeout);
}
this.open = true;
this.dispatch(GatewayEventType.Open, null);
console.log("[gateway] open");
};
@ -86,6 +88,7 @@ export default {
this.authenticated = false;
this.user = null;
this.channels = null;
this.open = false;
if (this.heartbeatInterval) {
clearInterval(this.heartbeatInterval);
}

6
frontend/src/main.js
View file

@ -5,6 +5,12 @@ import { initStorageDefaults } from './storage';
initStorageDefaults();
gateway.init();
// Remove loading screen
const loadingElement = document.getElementById("pre--loading-screen");
if (loadingElement) {
loadingElement.parentElement.removeChild(loadingElement);
}
const app = new App({
target: document.body
});

73
frontend/src/stores.js
View file

@ -1,11 +1,20 @@
import gateway, { GatewayEventType } from "./gateway";
export const channels = {
_handlers: [],
_value: [],
_didInit: false,
class Store {
constructor() {
this._handlers = [];
this._didInit = false;
}
_tryInit() {
if (!this._didInit && this._init) {
this._init();
this._didInit = true;
}
}
subscribe(handler) {
this._init();
this._tryInit();
const newLength = this._handlers.push(handler);
const handlerIndex = newLength - 1;
@ -13,20 +22,23 @@ export const channels = {
return () => {
this._handlers.splice(handlerIndex, 1);
};
},
}
_dispatchUpdate() {
this._handlers.forEach(e => {
e(this._value);
});
},
}
}
class ChannelsStore extends Store {
constructor() {
super();
this._value = [];
}
_init() {
window.__WAFFLE_CHANNELS_STORE = this;
if (this._didInit)
return;
this._didInit = true;
const channels = gateway.channels;
if (channels) {
this._value = channels;
@ -66,4 +78,35 @@ export const channels = {
this._dispatchUpdate();
});
}
};
}
class GatewayStatusStore extends Store {
constructor() {
super();
this._value = { open: false, ready: false };
}
_init() {
this._value.open = gateway.open;
this._value.ready = gateway.authenticated;
gateway.subscribe(GatewayEventType.Open, () => {
this._value.open = true;
this._dispatchUpdate();
});
gateway.subscribe(GatewayEventType.Close, () => {
this._value.open = false;
this._value.ready = false;
this._dispatchUpdate();
});
gateway.subscribe(GatewayEventType.Ready, () => {
this._value.ready = true;
this._dispatchUpdate();
});
}
}
export const channels = new ChannelsStore();
export const gatewayStatus = new GatewayStatusStore();