Fix server ping race condition before protocol version is available

apps/app-frontend/src/helpers/worlds.ts

@@ -435,11 +435,12 @@ export async function refreshServerData(
 	}
 }
 
-export function refreshServers(
+export async function refreshServers(
 	worlds: World[],
 	serverData: Record<string, ServerData>,
 	protocolVersion: ProtocolVersion | null,
-) {
+	ping = true,
+): Promise<void> {
 	const servers = worlds.filter(isServerWorld)
 	servers.forEach((server) => {
 		if (!serverData[server.address]) {
@@ -451,9 +452,14 @@ export function refreshServers(
 		}
 	})
 
-	// noinspection ES6MissingAwait - handled by refreshServerData
-	Object.keys(serverData).forEach((address) =>
-		refreshServerData(serverData[address], protocolVersion, address),
+	if (!ping) {
+		return
+	}
+
+	await Promise.all(
+		Object.keys(serverData).map((address) =>
+			refreshServerData(serverData[address], protocolVersion, address),
+		),
 	)
 }
 

apps/app-frontend/src/locales/en-US/index.json

@@ -590,6 +590,9 @@
   "app.instance.worlds.no-worlds-heading": {
     "message": "No servers or worlds added"
   },
+  "app.instance.worlds.refreshing": {
+    "message": "Refreshing..."
+  },
   "app.instance.worlds.remove-server-modal.remove-button": {
     "message": "Remove server"
   },

apps/app-frontend/src/pages/instance/Worlds.vue

@@ -75,7 +75,11 @@
 				<ButtonStyled type="transparent" hover-color-fill="none">
 					<button :disabled="refreshingAll" @click="refreshAllWorlds">
 						<RefreshCwIcon :class="refreshingAll ? 'animate-spin' : ''" />
-						{{ formatMessage(commonMessages.refreshButton) }}
+						{{
+							formatMessage(
+								refreshingAll ? messages.refreshingButton : commonMessages.refreshButton,
+							)
+						}}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -242,6 +246,10 @@ const messages = defineMessages({
 		id: 'app.instance.worlds.filter-offline',
 		defaultMessage: 'Offline',
 	},
+	refreshingButton: {
+		id: 'app.instance.worlds.refreshing',
+		defaultMessage: 'Refreshing...',
+	},
 })
 
 const { formatMessage } = useVIntl()
@@ -328,7 +336,7 @@ const isLinux = platform() === 'linux'
 const linuxRefreshCount = ref(0)
 
 const protocolVersion = ref<ProtocolVersion | null>(null)
-
+const protocolVersionReady = ref(false)
 const gameVersions = ref<GameVersion[]>([])
 const supportsServerQuickPlay = computed(() =>
 	hasServerQuickPlaySupport(gameVersions.value, instance.value.game_version),
@@ -342,8 +350,16 @@ watch(
 	(data) => {
 		if (data) {
 			worlds.value = [...data]
-			refreshServers(worlds.value, serverData.value, protocolVersion.value)
 			hadNoWorlds.value = worlds.value.length === 0
+			// Manual refresh handles its own server pings to avoid double-pinging
+			if (!refreshingAll.value) {
+				void refreshServers(
+					worlds.value,
+					serverData.value,
+					protocolVersion.value,
+					protocolVersionReady.value,
+				)
+			}
 		}
 	},
 	{ immediate: true },
@@ -443,16 +459,22 @@ async function initWorldsTab() {
 	unlistenInstance = _unlistenInstance
 	protocolVersion.value = resolvedProtocolVersion
 	gameVersions.value = resolvedGameVersions
+	protocolVersionReady.value = true
+
+	if (worlds.value.length > 0) {
+		refreshServers(worlds.value, serverData.value, protocolVersion.value)
+	}
 }
 
-await initWorldsTab()
+void initWorldsTab()
 
 async function refreshServer(address: string) {
 	if (!serverData.value[address]) {
 		serverData.value[address] = {
 			refreshing: true,
 		}
 	}
+	if (!protocolVersionReady.value) return
 	await refreshServerData(serverData.value[address], protocolVersion.value, address)
 }
 
@@ -463,8 +485,28 @@ async function refreshAllWorlds() {
 	}
 
 	refreshingAll.value = true
-	await queryClient.invalidateQueries({ queryKey: ['worlds', instance.value.id] })
-	refreshingAll.value = false
+	try {
+		// Show loading on server rows immediately while the list refreshes
+		for (const world of worlds.value) {
+			if (world.type === 'server') {
+				if (!serverData.value[world.address]) {
+					serverData.value[world.address] = { refreshing: true }
+				} else {
+					serverData.value[world.address].refreshing = true
+				}
+			}
+		}
+
+		await queryClient.invalidateQueries({ queryKey: ['worlds', instance.value.id] })
+		await refreshServers(
+			worlds.value,
+			serverData.value,
+			protocolVersion.value,
+			protocolVersionReady.value,
+		)
+	} finally {
+		refreshingAll.value = false
+	}
 }
 
 async function addServer(server: ServerWorld) {