From 65efc25d156393012a48a370d35f85fcbc80156a Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 28 Jul 2026 19:11:45 +0100
Subject: [PATCH] fix: loading flashes

---
 .../src/components/ui/QuickInstanceSwitcher.vue   |  6 ++++++
 apps/app-frontend/src/pages/instance/Index.vue    |  8 +++++++-
 apps/app-frontend/src/pages/project/Index.vue     |  6 ++----
 .../ui/src/layouts/shared/user-profile/layout.vue | 15 +++++++++++++++
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
index 851cf1be0e..81504fd3da 100644
--- a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
+++ b/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)
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index b0990749c4..9e2b27a89d 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/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()
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 12ad6a059b..b407a1c881 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -350,10 +350,8 @@ function getProjectBreadcrumbLabel(projectId) {
 		return formatMessage(commonMessages.loadingLabel)
 	}
 
-	return (
-		queryClient.getQueryData(['projects', 'summary', identifier])?.name ??
-		formatMessage(commonMessages.loadingLabel)
-	)
+	const summary = queryClient.getQueryData(['projects', 'summary', identifier])
+	return summary?.name ?? summary?.title ?? formatMessage(commonMessages.loadingLabel)
 }
 
 const projectBreadcrumbLabel = ref(getProjectBreadcrumbLabel(route.params.id))
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index 6ba0cdf85d..c2e0d7fd30 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/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 ?? [])