fix: loading flashes

apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { SpinnerIcon } from '@modrinth/assets'
 import { Avatar, injectNotificationManager } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { onUnmounted, ref } from 'vue'
@@ -10,11 +11,16 @@ import { instance_listener } from '@/helpers/events.js'
 import { list } from '@/helpers/instance'
 
 const { handleError } = injectNotificationManager()
+const queryClient = useQueryClient()
 
 const recentInstances = ref([])
 const getInstances = async () => {
 	const instances = await list().catch(handleError)
 
+	for (const instance of instances) {
+		queryClient.setQueryData(['instances', 'summary', instance.id], instance)
+	}
+
 	recentInstances.value = instances
 		.sort((a, b) => {
 			const dateACreated = dayjs(a.created)

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

@@ -226,7 +226,10 @@ window.addEventListener('online', () => {
 	offline.value = false
 })
 
-const instance = ref<GameInstance>()
+const initialInstanceId = String(displayedInstanceRoute.value.params.id ?? '')
+const instance = ref<GameInstance | undefined>(
+	queryClient.getQueryData<GameInstance>(['instances', 'summary', initialInstanceId]),
+)
 const instanceBreadcrumb = useRootBreadcrumb({
 	slot: 'instance',
 	id: () => `instance:${String(displayedInstanceRoute.value.params.id ?? '')}`,
@@ -387,6 +390,9 @@ async function fetchInstance() {
 	}
 
 	instance.value = nextInstance ?? undefined
+	if (nextInstance) {
+		queryClient.setQueryData(['instances', 'summary', nextInstance.id], nextInstance)
+	}
 	displayedInstanceRoute.value = nextRoute
 	sharedInstanceState.reset()
 	sharedInstanceState.refreshAvailability()

apps/app-frontend/src/pages/project/Index.vue

@@ -350,10 +350,8 @@ function getProjectBreadcrumbLabel(projectId) {
 		return formatMessage(commonMessages.loadingLabel)
 	}
 
-	return (
+	const summary = queryClient.getQueryData(['projects', 'summary', identifier])
-		queryClient.getQueryData(['projects', 'summary', identifier])?.name ??
+	return summary?.name ?? summary?.title ?? formatMessage(commonMessages.loadingLabel)
-		formatMessage(commonMessages.loadingLabel)
-	)
 }
 
 const projectBreadcrumbLabel = ref(getProjectBreadcrumbLabel(route.params.id))

packages/ui/src/layouts/shared/user-profile/layout.vue

@@ -642,6 +642,21 @@ const projects = computed<ResolvedProject[]>(() =>
 		resolvedProjectType: resolveProjectType(project, tags?.loaders.value ?? []),
 	})),
 )
+watch(
+	() => projectsQuery.data.value,
+	(projects) => {
+		if (props.projectLinkMode !== 'app') return
+
+		for (const project of projects ?? []) {
+			for (const identifier of [project.id, project.slug]) {
+				if (identifier) {
+					queryClient.setQueryData(['projects', 'summary', identifier], project)
+				}
+			}
+		}
+	},
+	{ immediate: true },
+)
 const organizations = computed(() => organizationsQuery.data.value ?? [])
 const collections = computed(() => collectionsQuery.data.value ?? [])