From 609fdcd906dcafb9a353dbbfa94363dfcd1f5f3b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 31 May 2023 15:29:20 +0200
Subject: [PATCH] only show presence if websocket connection succceeds

---
 .../components/sidebar/MultiplayerMenu.svelte | 73 ++++++++++---------
 1 file changed, 40 insertions(+), 33 deletions(-)

diff --git a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
index f2b0968403..32a3f9489d 100644
--- a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
+++ b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
@@ -16,6 +16,7 @@
 	let awareness: Awareness | undefined = undefined
 	let wsProvider: WebsocketProvider | undefined = undefined
 
+	let connected = false
 	function connectWorkspace(workspace: string) {
 		const ydoc = new Y.Doc()
 		wsProvider = new WebsocketProvider(
@@ -23,6 +24,10 @@
 			workspace,
 			ydoc
 		)
+		wsProvider.on('sync', (isSynced: boolean) => {
+			connected = true
+		})
+
 		awareness = wsProvider.awareness
 
 		awareness?.setLocalState({
@@ -80,41 +85,43 @@
 	}
 </script>
 
-<Menu placement="bottom-start">
-	<button
-		slot="trigger"
-		type="button"
-		class={classNames(
-			'group w-full flex items-center text-white hover:bg-gray-50 hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 px-2 py-2 text-sm font-medium rounded-md h-8 '
-		)}
-	>
-		<div class="center-center mr-2">
-			<Users size={16} />
-		</div>
+{#if connected}
+	<Menu placement="bottom-start">
+		<button
+			slot="trigger"
+			type="button"
+			class={classNames(
+				'group w-full flex items-center text-white hover:bg-gray-50 hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 px-2 py-2 text-sm font-medium rounded-md h-8 '
+			)}
+		>
+			<div class="center-center mr-2">
+				<Users size={16} />
+			</div>
 
-		{#if !isCollapsed}
-			<span class={classNames('whitespace-pre truncate')}>Live</span>
-		{/if}
-	</button>
+			{#if !isCollapsed}
+				<span class={classNames('whitespace-pre truncate')}>Live</span>
+			{/if}
+		</button>
 
-	<div class="divide-y divide-gray-100" role="none">
-		<div class="py-1 flex flex-col gap-y-1">
-			{#each Object.entries($awarenessStore ?? {}) as [user, url]}
-				<div class="inline-flex gap-2 px-2 items-center">
-					<span
-						class="inline-flex h-6 w-6 px-1 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
-						title={user}
-					>
-						<span class="text-sm font-medium leading-none text-white"
-							>{user.substring(0, 2).toLocaleUpperCase()}</span
+		<div class="divide-y divide-gray-100" role="none">
+			<div class="py-1 flex flex-col gap-y-1">
+				{#each Object.entries($awarenessStore ?? {}) as [user, url]}
+					<div class="inline-flex gap-2 px-2 items-center">
+						<span
+							class="inline-flex h-6 w-6 px-1 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
+							title={user}
 						>
-					</span>
-					<div class="flex flex-col">
-						<span class="text-sm text-gray-900 truncate">{user}</span>
-						<span class="text-xs text-gray-500 truncate">{showActivity(url)}</span>
+							<span class="text-sm font-medium leading-none text-white"
+								>{user.substring(0, 2).toLocaleUpperCase()}</span
+							>
+						</span>
+						<div class="flex flex-col">
+							<span class="text-sm text-gray-900 truncate">{user}</span>
+							<span class="text-xs text-gray-500 truncate">{showActivity(url)}</span>
+						</div>
 					</div>
-				</div>
-			{/each}
+				{/each}
+			</div>
 		</div>
-	</div>
-</Menu>
+	</Menu>
+{/if}