qa: content (#7184)

* qa: content card improvements for server panel

* fix: server install icon bug

* qa: 1

* fix: lint

* qa: 2

apps/app-frontend/src/composables/browse/use-app-server-browse.ts

@@ -1,5 +1,5 @@
 import type { Labrinth } from '@modrinth/api-client'
-import { CheckIcon, PlayIcon, PlusIcon, StopCircleIcon } from '@modrinth/assets'
+import { CheckIcon, PlayIcon, PlusIcon, SpinnerIcon, StopCircleIcon } from '@modrinth/assets'
 import type { CardAction } from '@modrinth/ui'
 import { commonMessages, defineMessages, useDebugLogger, useVIntl } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -75,6 +75,7 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 	const debugLog = useDebugLogger('BrowseServer')
 	const serverPings = shallowRef<Record<string, number | undefined>>({})
 	const runningServerProjects = ref<Record<string, string>>({})
+	const preparingServerProjects = ref<string[]>([])
 	const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
 	const contextMenuRef = ref<ContextMenuHandle | null>(null)
 	let serverPingsActive = true
@@ -109,9 +110,16 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 	}
 
 	async function handlePlayServerProject(projectId: string) {
+		if (preparingServerProjects.value.includes(projectId)) return
+
 		debugLog('handlePlayServerProject', projectId)
-		await options.playServerProject(projectId)
-		checkServerRunningStates(lastServerHits.value)
+		preparingServerProjects.value.push(projectId)
+		try {
+			await options.playServerProject(projectId)
+			checkServerRunningStates(lastServerHits.value)
+		} finally {
+			preparingServerProjects.value = preparingServerProjects.value.filter((id) => id !== projectId)
+		}
 	}
 
 	async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
@@ -247,13 +255,16 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 			})
 		} else {
 			const isInstalling = options.installingServerProjects.value.includes(serverResult.project_id)
+			const isPreparing = preparingServerProjects.value.includes(serverResult.project_id)
+			const isBusy = isInstalling || isPreparing
 			actions.push({
 				key: 'play',
 				label: formatMessage(
 					isInstalling ? commonMessages.installingLabel : commonMessages.playButton,
 				),
-				icon: PlayIcon,
-				disabled: isInstalling,
+				icon: isBusy ? SpinnerIcon : PlayIcon,
+				iconClass: isBusy ? 'animate-spin' : undefined,
+				disabled: isBusy,
 				color: 'brand',
 				type: 'outlined',
 				onClick: () => handlePlayServerProject(serverResult.project_id),