diff --git a/apps/app-frontend/src/components/ui/app-update-button/index.vue b/apps/app-frontend/src/components/ui/app-update-button/index.vue index f5098e0187..084cb25b5d 100644 --- a/apps/app-frontend/src/components/ui/app-update-button/index.vue +++ b/apps/app-frontend/src/components/ui/app-update-button/index.vue @@ -3,7 +3,7 @@ v-if="showUpdatePill" type="outlined" native-type="button" - class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]" + class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-inherit !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]" :class="{ 'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill, 'opacity-100 scale-100': finishedDownloading && animateReadyPill, diff --git a/apps/app-frontend/src/composables/browse/use-app-server-browse.ts b/apps/app-frontend/src/composables/browse/use-app-server-browse.ts index e96dd59595..14bdfecf05 100644 --- a/apps/app-frontend/src/composables/browse/use-app-server-browse.ts +++ b/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>({}) const runningServerProjects = ref>({}) + const preparingServerProjects = ref([]) const lastServerHits = shallowRef([]) const contextMenuRef = ref(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), diff --git a/apps/app-frontend/src/pages/instance/components/page-header/index.vue b/apps/app-frontend/src/pages/instance/components/page-header/index.vue index 1107d8a22d..3cfd2832db 100644 --- a/apps/app-frontend/src/pages/instance/components/page-header/index.vue +++ b/apps/app-frontend/src/pages/instance/components/page-header/index.vue @@ -33,7 +33,7 @@ :ping="ping" :minecraft-server="minecraftServer" :show-instance-play-time="showInstancePlayTime" - :playtime-label="playtimeLabel" + :playtime-label="playtimeLabel ?? formatMessage(messages.neverPlayed)" /> -
-
- - -
-
-

- {{ expandedGalleryItem.title }} -

-

- {{ expandedGalleryItem.description }} -

-
-
-
- - - - - - - - - - + +
+
+ + +
+
+

+ {{ expandedGalleryItem.title }} +

+

+ {{ expandedGalleryItem.description }} +

+
+
+
+ + + + + + + + + + +
-
+