work nicer while not connected

client/src/App.svelte

@@ -65,14 +65,13 @@
 	}
 
 	export function onInitialData(data) {
+		connected = true;
 		words = data.words;
 
 		items = {};
 		for (let i in data.items)
 			items[i] = { pending: false, content: data.items[i], index: i };
 		sortItems();
-
-		connected = true;
 	}
 
 	export function onDisconnect() {
@@ -107,15 +106,10 @@
 	}
 
 	.loading {
-		display: flex;
-		width: 100%;
-		height: 100%;
 		position: absolute;
-		top: 0px;
+		bottom: 0px;
 		left: 0px;
-		justify-content: center;
-		padding-top: 25vh;
-		background: rgba(0, 0, 0, 0.7);
+		right: 0px;
 	}
 </style>
 
@@ -127,8 +121,8 @@
 			<ListItem {item} on:remove={onRemove} />
 		{/each}
 	</div>
-</div>
 
-{#if !connected}
-	<div out:fade={{duration: 100}} class="loading"><LoadingIcon /></div>
-{/if}
+	{#if !connected}
+		<div out:fade={{duration: 100}} class="loading"><LoadingIcon /></div>
+	{/if}
+</div>

client/src/LoadingIcon.svelte

@@ -9,7 +9,7 @@
 		position: absolute;
 		width: 5px;
 		height: 5px;
-		background: #fff;
+		background: #333;
 		border-radius: 50%;
 		animation: lds-default 1.2s linear infinite;
 	}

client/src/main.js

@@ -1,6 +1,10 @@
 import App from './App.svelte';
 import WSockMan from './ws.js';
 
+window.addEventListener("unhandledrejection", evt => {
+	alert(evt.reason);
+});
+
 let wsock = new WSockMan(
 	`${location.protocol == "http:" ? "ws:" : "wss:"}//${location.host}/`);
 
@@ -25,8 +29,10 @@ function auth(key) {
 		});
 };
 
-wsock.onconnect = () => auth(localStorage.getItem("key"));
-wsock.ondisconnect = app.onDisconnect.bind(app);
+wsock.ondisconnect = () => {
+	app.onDisconnect();
+	auth(localStorage.getItem("key"));
+};
 
 wsock.onmessage = msg => {
 	switch (msg.type) {
@@ -43,4 +49,6 @@ wsock.onmessage = msg => {
 	}
 };
 
+auth(localStorage.getItem("key"));
+
 export default app;