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
Signed by: hippoz
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; 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 { .h1 {
font-size: 2.488rem; font-size: 2.488rem;
} }

1
frontend/public/index.html
View file

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

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

@ -1,19 +1,35 @@
<script> <script>
import ChannelView from "./ChannelView.svelte"; import { gatewayStatus } from "../../../stores";
import Sidebar from "./Sidebar.svelte"; import ChannelView from "./ChannelView.svelte";
import Sidebar from "./Sidebar.svelte";
</script> </script>
<style> <style>
.flex-container { .flex-container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: row; 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> </style>
{#if $gatewayStatus.ready}
<div class="flex-container"> <div class="flex-container">
<Sidebar /> <Sidebar />
<ChannelView channel={{ name: "channel name" }} /> <ChannelView channel={{ name: "channel name" }} />
</div> </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 { export default {
ws: null, ws: null,
authenticated: false, authenticated: false,
open: false,
heartbeatInterval: null, heartbeatInterval: null,
user: null, user: null,
channels: null, channels: null,
@ -43,6 +44,7 @@ export default {
if (this.reconnectTimeout) { if (this.reconnectTimeout) {
clearTimeout(this.reconnectTimeout); clearTimeout(this.reconnectTimeout);
} }
this.open = true;
this.dispatch(GatewayEventType.Open, null); this.dispatch(GatewayEventType.Open, null);
console.log("[gateway] open"); console.log("[gateway] open");
}; };
@ -86,6 +88,7 @@ export default {
this.authenticated = false; this.authenticated = false;
this.user = null; this.user = null;
this.channels = null; this.channels = null;
this.open = false;
if (this.heartbeatInterval) { if (this.heartbeatInterval) {
clearInterval(this.heartbeatInterval); clearInterval(this.heartbeatInterval);
} }

6
frontend/src/main.js
View file

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

73
frontend/src/stores.js
View file

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