fix: modal shift on close + readd settings preload (#6448)

* fix: NewModal layout shift on close

* fix: preload queries in settings modals

* fix: any

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -13,7 +13,7 @@ import {
 } from '@modrinth/ui'
 import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref } from 'vue'
 
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_version } from '@/helpers/cache'
@@ -46,55 +46,62 @@ debug('metadata load: start', {
 	installStage: instance.value.install_stage,
 })
 
-const [
-	fabric_versions,
-	forge_versions,
-	quilt_versions,
-	neoforge_versions,
-	all_game_versions,
-	loaders,
-] = await Promise.all([
-	get_loader_versions('fabric')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('forge')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('quilt')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('neo')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_game_versions()
-		.then((gameVersions: GameVersionTag[]) => shallowRef(gameVersions))
-		.catch(handleError),
-	get_loaders()
-		.then((value: PlatformTag[]) =>
-			value
-				.filter(
-					(item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla',
-				)
-				.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
-		)
-		.then((loader: PlatformTag[]) => ref(loader))
-		.catch(handleError),
-])
+function getSupportedModpackLoaders() {
+	return get_loaders().then((value: PlatformTag[]) =>
+		value
+			.filter((item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla')
+			.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
+	)
+}
 
-debug('metadata load: done', {
-	hasFabricManifest: !!fabric_versions?.value,
-	hasForgeManifest: !!forge_versions?.value,
-	hasQuiltManifest: !!quilt_versions?.value,
-	hasNeoforgeManifest: !!neoforge_versions?.value,
-	gameVersions: all_game_versions?.value?.length ?? 0,
-	availablePlatforms: loaders?.value?.map((loader) => loader.name) ?? [],
+const fabricVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'fabric'],
+	queryFn: () => get_loader_versions('fabric') as Promise<Manifest>,
+})
+const forgeVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'forge'],
+	queryFn: () => get_loader_versions('forge') as Promise<Manifest>,
+})
+const quiltVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'quilt'],
+	queryFn: () => get_loader_versions('quilt') as Promise<Manifest>,
+})
+const neoforgeVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'neo'],
+	queryFn: () => get_loader_versions('neo') as Promise<Manifest>,
+})
+const gameVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'game-versions'],
+	queryFn: () => get_game_versions() as Promise<GameVersionTag[]>,
+})
+const loadersQuery = useQuery({
+	queryKey: ['instance-settings', 'loaders', 'modpack'],
+	queryFn: getSupportedModpackLoaders,
 })
 
-const { data: modpackInfo } = useQuery({
+const metadataLoading = computed(() =>
+	[
+		fabricVersionsQuery,
+		forgeVersionsQuery,
+		quiltVersionsQuery,
+		neoforgeVersionsQuery,
+		gameVersionsQuery,
+		loadersQuery,
+	].some((query) => query.isLoading.value),
+)
+
+debug('metadata queries configured', {
+	instancePath: instance.value.path,
+	loader: instance.value.loader,
+	gameVersion: instance.value.game_version,
+})
+
+const modpackInfoQuery = useQuery({
 	queryKey: computed(() => ['linkedModpackInfo', instance.value.path]),
 	queryFn: () => get_linked_modpack_info(instance.value.path, 'must_revalidate'),
 	enabled: computed(() => !!instance.value.linked_data?.project_id && !offline),
 })
+const modpackInfo = modpackInfoQuery.data
 
 const repairing = ref(false)
 const reinstalling = ref(false)
@@ -107,17 +114,17 @@ const messages = defineMessages({
 })
 
 function getManifest(loader: string) {
-	const map: Record<string, typeof fabric_versions> = {
-		fabric: fabric_versions,
-		forge: forge_versions,
-		quilt: quilt_versions,
-		neoforge: neoforge_versions,
+	const map: Record<string, Manifest | undefined> = {
+		fabric: fabricVersionsQuery.data.value,
+		forge: forgeVersionsQuery.data.value,
+		quilt: quiltVersionsQuery.data.value,
+		neoforge: neoforgeVersionsQuery.data.value,
 	}
 	const manifest = map[loader]
 	debug('getManifest:', {
 		loader,
-		hasManifest: !!manifest?.value,
-		gameVersions: manifest?.value?.gameVersions?.length ?? 0,
+		hasManifest: !!manifest,
+		gameVersions: manifest?.gameVersions?.length ?? 0,
 	})
 	return manifest
 }
@@ -143,7 +150,7 @@ provideAppBackup({
 
 provideInstallationSettings({
 	closeSettings: closeModal,
-	loading: ref(false),
+	loading: computed(() => metadataLoading.value || modpackInfoQuery.isLoading.value),
 	installationInfo: computed(() => {
 		const rows = [
 			{
@@ -185,14 +192,14 @@ provideInstallationSettings({
 	currentPlatform: computed(() => instance.value.loader),
 	currentGameVersion: computed(() => instance.value.game_version),
 	currentLoaderVersion: computed(() => instance.value.loader_version ?? ''),
-	availablePlatforms: loaders?.value?.map((x) => x.name) ?? [],
+	availablePlatforms: computed(() => loadersQuery.data.value?.map((x) => x.name) ?? []),
 
 	resolveGameVersions(loader, showSnapshots) {
-		const versions = all_game_versions?.value ?? []
+		const versions = gameVersionsQuery.data.value ?? []
 		const filtered = versions.filter((item) => {
 			if (loader === 'vanilla') return true
 			const manifest = getManifest(loader)
-			return !!manifest?.value?.gameVersions?.some((x) => item.version === x.id)
+			return !!manifest?.gameVersions?.some((x) => item.version === x.id)
 		})
 		const result = (
 			showSnapshots ? filtered : filtered.filter((x) => x.version_type === 'release')
@@ -213,12 +220,12 @@ provideInstallationSettings({
 			return []
 		}
 		const manifest = getManifest(loader)
-		if (!manifest?.value) {
+		if (!manifest) {
 			debug('resolveLoaderVersions: no manifest', { loader, gameVersion })
 			return []
 		}
 		if (loader === 'fabric' || loader === 'quilt') {
-			const result = manifest.value.gameVersions[0]?.loaders ?? []
+			const result = manifest.gameVersions[0]?.loaders ?? []
 			debug('resolveLoaderVersions: fabric/quilt result', {
 				loader,
 				gameVersion,
@@ -226,14 +233,13 @@ provideInstallationSettings({
 			})
 			return result
 		}
-		const result =
-			manifest.value.gameVersions?.find((item) => item.id === gameVersion)?.loaders ?? []
+		const result = manifest.gameVersions?.find((item) => item.id === gameVersion)?.loaders ?? []
 		debug('resolveLoaderVersions: result', { loader, gameVersion, count: result.length })
 		return result
 	},
 
 	resolveHasSnapshots(loader) {
-		const versions = all_game_versions?.value ?? []
+		const versions = gameVersionsQuery.data.value ?? []
 		if (loader === 'vanilla') {
 			const result = versions.some((x) => x.version_type !== 'release')
 			debug('resolveHasSnapshots: vanilla', { loader, result })
@@ -241,7 +247,7 @@ provideInstallationSettings({
 		}
 		const manifest = getManifest(loader)
 		const supported = versions.filter(
-			(item) => !!manifest?.value?.gameVersions?.some((x) => item.version === x.id),
+			(item) => !!manifest?.gameVersions?.some((x) => item.version === x.id),
 		)
 		const result = supported.some((x) => x.version_type !== 'release')
 		debug('resolveHasSnapshots:', {

apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue

@@ -16,7 +16,8 @@ import {
 	type TabbedModalTab,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
+import type { PlatformTag } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, nextTick, ref, watch } from 'vue'
 
@@ -26,7 +27,9 @@ import InstallationSettings from '@/components/ui/instance_settings/Installation
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
 import { get_project_v3 } from '@/helpers/cache'
+import { get_loader_versions } from '@/helpers/metadata'
 import { get_linked_modpack_info } from '@/helpers/profile'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
 import { provideInstanceSettings } from '@/providers/instance-settings'
 
 import type { GameInstance } from '../../../helpers/types'
@@ -45,7 +48,6 @@ const isMinecraftServer = ref(false)
 const handleUnlinked = () => emit('unlinked')
 
 const instanceRef = computed(() => props.instance)
-const queryClient = useQueryClient()
 const tabbedModal = ref<InstanceType<typeof TabbedModal> | null>(null)
 
 function hide() {
@@ -120,13 +122,46 @@ const tabs = computed<TabbedModalTab[]>(() => [
 	},
 ])
 
+function getSupportedModpackLoaders() {
+	return get_loaders().then((value: PlatformTag[]) =>
+		value
+			.filter((item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla')
+			.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
+	)
+}
+
+// Preload
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'fabric'],
+	queryFn: () => get_loader_versions('fabric'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'forge'],
+	queryFn: () => get_loader_versions('forge'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'quilt'],
+	queryFn: () => get_loader_versions('quilt'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'neo'],
+	queryFn: () => get_loader_versions('neo'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'game-versions'],
+	queryFn: get_game_versions,
+})
+useQuery({
+	queryKey: ['instance-settings', 'loaders', 'modpack'],
+	queryFn: getSupportedModpackLoaders,
+})
+useQuery({
+	queryKey: computed(() => ['linkedModpackInfo', props.instance.path]),
+	queryFn: () => get_linked_modpack_info(props.instance.path, 'stale_while_revalidate'),
+	enabled: computed(() => !!props.instance.linked_data?.project_id && !props.offline),
+})
+
 function show(tabIndex?: number) {
-	if (props.instance.linked_data?.project_id) {
-		queryClient.prefetchQuery({
-			queryKey: ['linkedModpackInfo', props.instance.path],
-			queryFn: () => get_linked_modpack_info(props.instance.path, 'stale_while_revalidate'),
-		})
-	}
 	tabbedModal.value?.show()
 	if (tabIndex !== undefined) {
 		nextTick(() => tabbedModal.value?.setTab(tabIndex))

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

@@ -90,6 +90,7 @@ import {
 	useVIntl,
 	versionChangesGameVersion,
 } from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { open } from '@tauri-apps/plugin-dialog'
 import { openUrl } from '@tauri-apps/plugin-opener'
@@ -153,6 +154,7 @@ const { formatMessage } = useVIntl()
 const { handleError, addNotification } = injectNotificationManager()
 const { installingItems } = injectContentInstall()
 const router = useRouter()
+const queryClient = useQueryClient()
 const debug = useDebugLogger('Mods:ContentUpdate')
 
 const props = defineProps<{
@@ -212,6 +214,13 @@ const contentUpdaterModal = ref<InstanceType<typeof ContentUpdaterModal> | null>
 const modpackContentModal = ref<InstanceType<typeof ModpackContentModal> | null>()
 const modpackUpdateConfirmModal = ref<InstanceType<typeof ConfirmModpackUpdateModal> | null>()
 
+const modpackContentQueryKey = computed(() => ['linkedModpackContent', props.instance.path])
+const modpackContentQuery = useQuery({
+	queryKey: modpackContentQueryKey,
+	queryFn: () => get_linked_modpack_content(props.instance.path),
+	enabled: computed(() => !!props.instance?.path && !!props.instance?.linked_data),
+})
+
 // TODO: Extract content operation and updater modal state into composables; this page currently owns file mutations, dependency installs, busy flags, and version selection flow.
 const updatingProject = ref<ContentItem | null>(null)
 const updatingProjectVersions = ref<Labrinth.Versions.v2.Version[]>([])
@@ -740,13 +749,19 @@ async function handleModpackContentBulkToggle(items: ContentItem[]) {
 async function handleModpackContent() {
 	if (!props.instance?.path) return
 
+	if (modpackContentQuery.data.value !== undefined) {
+		modpackContentModal.value?.show(modpackContentQuery.data.value)
+		return
+	}
+
 	modpackContentModal.value?.showLoading()
 
-	const contentItems = await get_linked_modpack_content(props.instance.path).catch(handleError)
+	const { data, error } = await modpackContentQuery.refetch()
 
-	if (contentItems) {
-		modpackContentModal.value?.show(contentItems)
+	if (data !== undefined) {
+		modpackContentModal.value?.show(data)
 	} else {
+		if (error) handleError(error)
 		modpackContentModal.value?.hide()
 	}
 }
@@ -754,9 +769,12 @@ async function handleModpackContent() {
 async function refreshModpackContentItems(cacheBehaviour?: CacheBehaviour) {
 	if (!props.instance?.path) return
 
-	const contentItems = await get_linked_modpack_content(props.instance.path, cacheBehaviour).catch(
-		handleError,
-	)
+	const contentItems = await queryClient
+		.fetchQuery({
+			queryKey: modpackContentQueryKey.value,
+			queryFn: () => get_linked_modpack_content(props.instance.path, cacheBehaviour),
+		})
+		.catch(handleError)
 
 	if (contentItems) {
 		modpackContentModal.value?.setItems(contentItems)