feat: shared loading state + cleanup loading state management (#5835)

* feat: implement shared loading bar component and polished loading states across the app

* feat: align loading states + ensureQueryData changes

* fix: lint + bugs

* fix: skeleton for manage servers page

* fix: merge conflict fix

apps/app-frontend/src/App.vue

@@ -38,6 +38,7 @@ import {
 	CreationFlowModal,
 	defineMessages,
 	I18nDebugPanel,
+	LoadingBar,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
@@ -52,7 +53,7 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { formatBytes, renderString } from '@modrinth/utils'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
@@ -65,7 +66,6 @@ import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
-import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
@@ -113,8 +113,9 @@ import {
 import { createServerInstall, provideServerInstall } from '@/providers/server-install'
 import { setupProviders } from '@/providers/setup'
 import { setupAuthProvider } from '@/providers/setup/auth'
+import { setupLoadingStateProvider } from '@/providers/setup/loading-state'
 import { useError } from '@/store/error.js'
-import { useLoading, useTheming } from '@/store/state'
+import { useTheming } from '@/store/state'
 
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
@@ -420,9 +421,11 @@ const handleClose = async () => {
 const router = useRouter()
 const route = useRoute()
 
-const loading = useLoading()
+const loading = setupLoadingStateProvider()
 loading.setEnabled(false)
-loading.startLoading()
+let initialLoadToken = loading.begin()
+let routerToken = null
+let suspenseToken = null
 
 let suspensePending = false
 
@@ -435,7 +438,8 @@ const sidebarOverlayScrollbarsOptions = Object.freeze({
 
 router.beforeEach(() => {
 	suspensePending = false
-	loading.startLoading()
+	if (routerToken) loading.end(routerToken)
+	routerToken = loading.begin()
 })
 router.afterEach((to, from, failure) => {
 	trackEvent('PageView', {
@@ -445,11 +449,83 @@ router.afterEach((to, from, failure) => {
 	})
 	setTimeout(() => {
 		if (!suspensePending && stateInitialized.value) {
-			loading.stopLoading()
+			if (initialLoadToken) {
+				loading.end(initialLoadToken)
+				initialLoadToken = null
+			}
+			if (routerToken) {
+				loading.end(routerToken)
+				routerToken = null
+			}
 		}
 	}, 100)
 })
 
+function onSuspensePending() {
+	suspensePending = true
+	if (suspenseToken) loading.end(suspenseToken)
+	suspenseToken = loading.begin()
+}
+
+function onSuspenseResolve() {
+	if (suspenseToken) {
+		loading.end(suspenseToken)
+		suspenseToken = null
+	}
+	if (routerToken) {
+		loading.end(routerToken)
+		routerToken = null
+	}
+}
+
+const queryClient = useQueryClient()
+
+watch(stateInitialized, (ready) => {
+	if (ready) {
+		if (initialLoadToken) {
+			loading.end(initialLoadToken)
+			initialLoadToken = null
+		}
+		if (routerToken) {
+			loading.end(routerToken)
+			routerToken = null
+		}
+
+		queryClient.prefetchQuery({
+			queryKey: ['servers'],
+			queryFn: async () => {
+				const response = await tauriApiClient.archon.servers_v0.list({ limit: 100 })
+				const hasMedalServers = response.servers.some((s) => s.is_medal)
+				if (hasMedalServers) {
+					const subscriptions = await tauriApiClient.labrinth.billing_internal.getSubscriptions()
+					for (const server of response.servers) {
+						if (server.is_medal) {
+							const sub = subscriptions.find((s) => s.metadata?.id === server.server_id)
+							if (sub) {
+								server.medal_expires = new Date(
+									new Date(sub.created).getTime() + 5 * 86400000,
+								).toISOString()
+							}
+						}
+					}
+				}
+				return response
+			},
+			staleTime: 30_000,
+		})
+		queryClient.prefetchQuery({
+			queryKey: ['billing', 'subscriptions'],
+			queryFn: () => tauriApiClient.labrinth.billing_internal.getSubscriptions(),
+			staleTime: 30_000,
+		})
+		queryClient.prefetchQuery({
+			queryKey: ['billing', 'payments'],
+			queryFn: () => tauriApiClient.labrinth.billing_internal.getPayments(),
+			staleTime: 30_000,
+		})
+	}
+})
+
 const error = useError()
 const errorModal = ref()
 const minecraftAuthErrorModal = ref()
@@ -1236,7 +1312,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					width: 'calc(100% - var(--left-bar-width) - var(--right-bar-width))',
 				}"
 			>
-				<ModrinthLoadingIndicator />
+				<LoadingBar position="absolute" />
 			</div>
 			<div
 				v-if="themeStore.featureFlags.page_path"
@@ -1272,19 +1348,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</Admonition>
 			<RouterView v-slot="{ Component }">
 				<template v-if="Component">
-					<Suspense
-						@pending="
-							() => {
-								suspensePending = true
-								loading.startLoading()
-							}
-						"
-						@resolve="
-							() => {
-								loading.stopLoading()
-							}
-						"
-					>
+					<Suspense @pending="onSuspensePending" @resolve="onSuspenseResolve">
 						<component :is="Component"></component>
 					</Suspense>
 				</template>

apps/app-frontend/src/components/LoadingIndicatorBar.vue

@@ -1,142 +0,0 @@
-<script setup>
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
-
-import { useLoading } from '@/store/state.js'
-
-const props = defineProps({
-	throttle: {
-		type: Number,
-		default: 0,
-	},
-	duration: {
-		type: Number,
-		default: 1000,
-	},
-	height: {
-		type: Number,
-		default: 2,
-	},
-	color: {
-		type: String,
-		default: 'var(--loading-bar-gradient)',
-	},
-})
-
-const indicator = useLoadingIndicator({
-	duration: props.duration,
-	throttle: props.throttle,
-})
-
-onBeforeUnmount(() => indicator.clear)
-
-const loading = useLoading()
-
-watch(loading, (newValue) => {
-	if (newValue.barEnabled) {
-		if (newValue.loading) {
-			indicator.start()
-		} else {
-			indicator.finish()
-		}
-	}
-})
-
-function useLoadingIndicator(opts) {
-	const progress = ref(0)
-	const isLoading = ref(false)
-	const step = computed(() => 10000 / opts.duration)
-
-	let _timer = null
-	let _throttle = null
-
-	function start() {
-		clear()
-		progress.value = 0
-		if (opts.throttle) {
-			_throttle = setTimeout(() => {
-				isLoading.value = true
-				_startTimer()
-			}, opts.throttle)
-		} else {
-			isLoading.value = true
-			_startTimer()
-		}
-	}
-
-	function finish() {
-		progress.value = 100
-		_hide()
-	}
-
-	function clear() {
-		clearInterval(_timer)
-		clearTimeout(_throttle)
-		_timer = null
-		_throttle = null
-	}
-
-	function _increase(num) {
-		progress.value = Math.min(100, progress.value + num)
-	}
-
-	function _hide() {
-		clear()
-		setTimeout(() => {
-			isLoading.value = false
-			setTimeout(() => {
-				progress.value = 0
-			}, 400)
-		}, 500)
-	}
-
-	function _startTimer() {
-		_timer = setInterval(() => {
-			_increase(step.value)
-		}, 100)
-	}
-
-	return { progress, isLoading, start, finish, clear }
-}
-</script>
-
-<template>
-	<div
-		class="loading-indicator-bar"
-		:style="{
-			'--_width': `${indicator.progress.value}%`,
-			'--_height': `${indicator.isLoading.value ? props.height : 0}px`,
-			'--_opacity': `${indicator.isLoading.value ? 1 : 0}`,
-			top: `0`,
-			right: `0`,
-			left: `${props.offsetWidth}`,
-			pointerEvents: 'none',
-			width: `var(--_width)`,
-			height: `var(--_height)`,
-			borderRadius: `var(--_height)`,
-			// opacity: `var(--_opacity)`,
-			background: `${props.color}`,
-			backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
-			transition: 'width 0.1s ease-in-out, height 0.1s ease-out',
-			zIndex: 6,
-		}"
-	>
-		<slot />
-	</div>
-</template>
-<style lang="scss" scoped>
-.loading-indicator-bar::before {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	width: var(--_width);
-	bottom: 0;
-	background-image: radial-gradient(80% 100% at 20% 0%, var(--color-brand) 0%, transparent 80%);
-	opacity: calc(var(--_opacity) * 0.1);
-	z-index: 5;
-	transition:
-		width 0.1s ease-in-out,
-		opacity 0.1s ease-out;
-}
-</style>

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

@@ -78,11 +78,11 @@
 </template>
 
 <script setup>
+import { injectLoadingState } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { loading_listener } from '@/helpers/events.js'
-import { useLoading } from '@/store/loading.js'
 
 const doneLoading = ref(false)
 const loadingProgress = ref(0)
@@ -91,20 +91,20 @@ const message = ref()
 const MIN_DISPLAY_MS = 500
 const mountedAt = Date.now()
 
-const loading = useLoading()
+const loading = injectLoadingState()
 
 function onAfterLeave() {
 	loading.setEnabled(true)
 }
 
 watch(
-	loading,
-	(newValue) => {
-		if (newValue.barEnabled) {
+	[loading.barEnabled, loading.pending],
+	([barEnabled, pending]) => {
+		if (barEnabled) {
 			return
 		}
 
-		if (loading.loading) {
+		if (pending) {
 			loadingProgress.value = 0
 			fakeLoadingIncrease()
 			return
@@ -114,7 +114,7 @@ watch(
 		const delay = Math.max(0, MIN_DISPLAY_MS - elapsed)
 
 		setTimeout(() => {
-			if (loading.loading) {
+			if (loading.pending.value) {
 				return
 			}
 			doneLoading.value = true

apps/app-frontend/src/pages/hosting/manage/Backups.vue

@@ -1,7 +1,26 @@
 <script setup lang="ts">
-import { injectModrinthServerContext, ServersManageBackupsPage } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageBackupsPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 
-const { isServerRunning } = injectModrinthServerContext()
+const client = injectModrinthClient()
+const { serverId, worldId, isServerRunning } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+if (worldId.value) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['backups', 'list', serverId],
+			queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
 </script>
 
 <template>

apps/app-frontend/src/pages/hosting/manage/Content.vue

@@ -1,5 +1,27 @@
 <script setup lang="ts">
-import { ServersManageContentPage } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageContentPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+
+const client = injectModrinthClient()
+const { serverId, worldId } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+if (worldId.value) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['content', 'list', 'v1', serverId],
+			queryFn: () =>
+				client.archon.content_v1.getAddons(serverId, worldId.value!, { from_modpack: false }),
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
 </script>
 
 <template>

apps/app-frontend/src/pages/hosting/manage/Files.vue

@@ -1,5 +1,24 @@
 <script setup lang="ts">
-import { ServersManageFilesPage } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageFilesPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+
+const client = injectModrinthClient()
+const { serverId } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+try {
+	await queryClient.ensureQueryData({
+		queryKey: ['files', serverId, '/'],
+		queryFn: () => client.kyros.files_v0.listDirectory('/', 1, 2000),
+		staleTime: 30_000,
+	})
+} catch {
+	// Let mounted layouts' useQuery surface errors; do not fail route setup.
+}
 </script>
 
 <template>

apps/app-frontend/src/pages/hosting/manage/Index.vue

@@ -35,9 +35,6 @@
 								@reinstall="onReinstall"
 								@reinstall-failed="onReinstallFailed"
 							/>
-							<template #fallback>
-								<LoadingIndicator />
-							</template>
 						</Suspense>
 					</template>
 				</RouterView>
@@ -48,8 +45,8 @@
 
 <script setup lang="ts">
 import type { Archon, Labrinth } from '@modrinth/api-client'
-import { injectAuth, LoadingIndicator, ServersManageRootLayout } from '@modrinth/ui'
-import { useQuery } from '@tanstack/vue-query'
+import { injectAuth, injectModrinthClient, ServersManageRootLayout } from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, watch } from 'vue'
@@ -64,6 +61,8 @@ import { useTheming } from '@/store/theme'
 const route = useRoute()
 const router = useRouter()
 const auth = injectAuth()
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
 const themeStore = useTheming()
 const breadcrumbs = useBreadcrumbs()
 
@@ -72,6 +71,18 @@ const serverId = computed(() => {
 	return Array.isArray(rawId) ? rawId[0] : (rawId ?? '')
 })
 
+if (serverId.value) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['servers', 'detail', serverId.value],
+			queryFn: () => client.archon.servers_v0.get(serverId.value)!,
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
+
 const { data: serverData } = useQuery({
 	queryKey: computed(() => ['servers', 'detail', serverId.value]),
 	queryFn: () => null as unknown as Archon.Servers.v0.Server,

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

@@ -6,6 +6,7 @@ import {
 	FilePageLayout,
 	injectNotificationManager,
 	provideFileManager,
+	ReadyTransition,
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
@@ -54,6 +55,8 @@ const messages = defineMessages({
 
 const instanceRoot = ref('')
 const items = ref<FileItem[]>([])
+/** True until the first directory read for the current instance path finishes (initial load only). */
+const firstPaintPending = ref(true)
 const loading = ref(true)
 const error = ref<Error | null>(null)
 const currentPath = ref('')
@@ -123,6 +126,7 @@ async function refresh() {
 		items.value = []
 	} finally {
 		loading.value = false
+		firstPaintPending.value = false
 	}
 }
 
@@ -305,6 +309,7 @@ watch(
 	() => props.instance.path,
 	async () => {
 		debug('watch instance.path: changed to', props.instance.path)
+		firstPaintPending.value = true
 		instanceRoot.value = await get_full_path(props.instance.path)
 		currentPath.value = ''
 		await refresh()
@@ -341,5 +346,7 @@ provideFileManager({
 </script>
 
 <template>
-	<FilePageLayout :show-refresh-button="true" />
+	<ReadyTransition :pending="firstPaintPending">
+		<FilePageLayout :show-refresh-button="true" />
+	</ReadyTransition>
 </template>

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

@@ -218,11 +218,7 @@
 				:key="instance.path"
 			>
 				<template v-if="Component">
-					<Suspense
-						:key="instance.path"
-						@pending="loadingBar.startLoading()"
-						@resolve="loadingBar.stopLoading()"
-					>
+					<Suspense :key="instance.path">
 						<component
 							:is="Component"
 							:instance="instance"
@@ -235,9 +231,6 @@
 							@play="updatePlayState"
 							@stop="() => stopInstance('InstanceSubpage')"
 						></component>
-						<template #fallback>
-							<LoadingIndicator />
-						</template>
 					</Suspense>
 				</template>
 			</RouterView>
@@ -296,7 +289,6 @@ import {
 	ButtonStyled,
 	ContentPageHeader,
 	injectNotificationManager,
-	LoadingIndicator,
 	NavTabs,
 	OverflowMenu,
 	ServerOnlinePlayers,
@@ -304,6 +296,7 @@ import {
 	ServerRecentPlays,
 	ServerRegion,
 } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
@@ -323,16 +316,17 @@ import { get_by_profile_path } from '@/helpers/process'
 import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'
 import type { GameInstance } from '@/helpers/types'
 import { showProfileInFolder } from '@/helpers/utils.js'
-import { get_server_status } from '@/helpers/worlds'
+import { get_server_status, refreshWorlds } from '@/helpers/worlds'
 import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
-import { useBreadcrumbs, useLoading } from '@/store/state'
+import { useBreadcrumbs } from '@/store/state'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
 const { handleError } = injectNotificationManager()
 const { playServerProject } = injectServerInstall()
+const queryClient = useQueryClient()
 const route = useRoute()
 
 const router = useRouter()
@@ -392,6 +386,14 @@ async function fetchInstance() {
 	}
 
 	fetchDeferredData()
+
+	if (instance.value) {
+		queryClient.prefetchQuery({
+			queryKey: ['worlds', instance.value.path],
+			queryFn: () => refreshWorlds(instance.value!.path),
+			staleTime: 30_000,
+		})
+	}
 }
 
 function fetchDeferredData() {
@@ -471,8 +473,6 @@ if (instance.value) {
 	})
 }
 
-const loadingBar = useLoading()
-
 const options = ref<InstanceType<typeof ContextMenu> | null>(null)
 
 const startInstance = async (context: string) => {

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

@@ -1,65 +1,67 @@
 <template>
-	<ContentPageLayout>
-		<template #modals>
-			<ShareModalWrapper
-				ref="shareModal"
-				:share-title="formatMessage(messages.shareTitle)"
-				:share-text="formatMessage(messages.shareText)"
-				:open-in-new-tab="false"
-			/>
-			<ModpackContentModal
-				ref="modpackContentModal"
-				:modpack-name="linkedModpackProject?.title"
-				:modpack-icon-url="linkedModpackProject?.icon_url ?? undefined"
-				:enable-toggle="!props.isServerInstance"
-				:get-overflow-options="getOverflowOptions"
-				:switch-version="handleSwitchVersion"
-				@update:enabled="handleModpackContentToggle"
-				@bulk:enable="handleModpackContentBulkToggle"
-				@bulk:disable="handleModpackContentBulkToggle"
-			/>
-			<ConfirmModpackUpdateModal
-				ref="modpackUpdateConfirmModal"
-				:downgrade="isModpackUpdateDowngrade"
-				:backup-tip="
-					[linkedModpackProject?.title, pendingModpackUpdateVersion?.version_number]
-						.filter(Boolean)
-						.join(' ')
-				"
-				@confirm="handleModpackUpdateConfirm"
-				@cancel="handleModpackUpdateCancel"
-			/>
-			<ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
-			<ContentUpdaterModal
-				v-if="updatingProject || updatingModpack"
-				ref="contentUpdaterModal"
-				:versions="updatingProjectVersions"
-				:current-game-version="instance.game_version"
-				:current-loader="instance.loader"
-				:current-version-id="
-					updatingModpack
-						? (instance.linked_data?.version_id ?? '')
-						: (updatingProject?.version?.id ?? '')
-				"
-				:is-app="true"
-				:project-type="updatingModpack ? 'modpack' : updatingProject?.project_type"
-				:project-icon-url="
-					updatingModpack ? linkedModpackProject?.icon_url : updatingProject?.project?.icon_url
-				"
-				:project-name="
-					updatingModpack
-						? (linkedModpackProject?.title ?? formatMessage(commonMessages.modpackLabel))
-						: (updatingProject?.project?.title ?? updatingProject?.file_name)
-				"
-				:loading="loadingVersions"
-				:loading-changelog="loadingChangelog"
-				@update="handleModalUpdate"
-				@cancel="resetUpdateState"
-				@version-select="handleVersionSelect"
-				@version-hover="handleVersionHover"
-			/>
-		</template>
-	</ContentPageLayout>
+	<ReadyTransition :pending="loading">
+		<ContentPageLayout>
+			<template #modals>
+				<ShareModalWrapper
+					ref="shareModal"
+					:share-title="formatMessage(messages.shareTitle)"
+					:share-text="formatMessage(messages.shareText)"
+					:open-in-new-tab="false"
+				/>
+				<ModpackContentModal
+					ref="modpackContentModal"
+					:modpack-name="linkedModpackProject?.title"
+					:modpack-icon-url="linkedModpackProject?.icon_url ?? undefined"
+					:enable-toggle="!props.isServerInstance"
+					:get-overflow-options="getOverflowOptions"
+					:switch-version="handleSwitchVersion"
+					@update:enabled="handleModpackContentToggle"
+					@bulk:enable="handleModpackContentBulkToggle"
+					@bulk:disable="handleModpackContentBulkToggle"
+				/>
+				<ConfirmModpackUpdateModal
+					ref="modpackUpdateConfirmModal"
+					:downgrade="isModpackUpdateDowngrade"
+					:backup-tip="
+						[linkedModpackProject?.title, pendingModpackUpdateVersion?.version_number]
+							.filter(Boolean)
+							.join(' ')
+					"
+					@confirm="handleModpackUpdateConfirm"
+					@cancel="handleModpackUpdateCancel"
+				/>
+				<ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
+				<ContentUpdaterModal
+					v-if="updatingProject || updatingModpack"
+					ref="contentUpdaterModal"
+					:versions="updatingProjectVersions"
+					:current-game-version="instance.game_version"
+					:current-loader="instance.loader"
+					:current-version-id="
+						updatingModpack
+							? (instance.linked_data?.version_id ?? '')
+							: (updatingProject?.version?.id ?? '')
+					"
+					:is-app="true"
+					:project-type="updatingModpack ? 'modpack' : updatingProject?.project_type"
+					:project-icon-url="
+						updatingModpack ? linkedModpackProject?.icon_url : updatingProject?.project?.icon_url
+					"
+					:project-name="
+						updatingModpack
+							? (linkedModpackProject?.title ?? formatMessage(commonMessages.modpackLabel))
+							: (updatingProject?.project?.title ?? updatingProject?.file_name)
+					"
+					:loading="loadingVersions"
+					:loading-changelog="loadingChangelog"
+					@update="handleModalUpdate"
+					@cancel="resetUpdateState"
+					@version-select="handleVersionSelect"
+					@version-hover="handleVersionHover"
+				/>
+			</template>
+		</ContentPageLayout>
+	</ReadyTransition>
 </template>
 
 <script setup lang="ts">
@@ -82,6 +84,7 @@ import {
 	type OverflowMenuOption,
 	provideAppBackup,
 	provideContentManager,
+	ReadyTransition,
 	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'

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

@@ -37,22 +37,109 @@
 		:description="formatMessage(messages.deleteWorldDescription, { name: worldToDelete?.name })"
 		@proceed="proceedDeleteWorld"
 	/>
-	<div v-if="dedupedWorlds.length > 0" class="flex flex-col gap-4">
-		<div class="flex flex-wrap items-center gap-2">
-			<StyledInput
-				v-model="searchFilter"
-				:icon="SearchIcon"
-				type="text"
-				autocomplete="off"
-				:spellcheck="false"
-				input-class="!h-10"
-				wrapper-class="flex-1 min-w-0"
-				clearable
-				:placeholder="
-					formatMessage(messages.searchWorldsPlaceholder, { count: dedupedWorlds.length })
-				"
-			/>
-			<div class="flex gap-2">
+	<ReadyTransition :pending="worldsReadyPending">
+		<div v-if="dedupedWorlds.length > 0" class="flex flex-col gap-4">
+			<div class="flex flex-wrap items-center gap-2">
+				<StyledInput
+					v-model="searchFilter"
+					:icon="SearchIcon"
+					type="text"
+					autocomplete="off"
+					:spellcheck="false"
+					input-class="!h-10"
+					wrapper-class="flex-1 min-w-0"
+					clearable
+					:placeholder="
+						formatMessage(messages.searchWorldsPlaceholder, { count: dedupedWorlds.length })
+					"
+				/>
+				<div class="flex gap-2">
+					<ButtonStyled type="outlined">
+						<button class="!h-10 !border-button-bg !border-[1px]" @click="addServerModal?.show()">
+							<PlusIcon class="size-5" />
+							{{ formatMessage(messages.addServer) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button
+							class="!h-10 flex items-center gap-2"
+							@click="
+								router.push({ path: '/browse/server', query: { i: instance.path, from: 'worlds' } })
+							"
+						>
+							<CompassIcon class="size-5" />
+							<span>{{ formatMessage(messages.browseServers) }}</span>
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+			<div class="flex flex-wrap items-center justify-between gap-2">
+				<div class="flex flex-wrap items-center gap-1.5">
+					<FilterIcon class="size-5 text-secondary" />
+					<button
+						:class="filterPillClass(selectedFilters.length === 0)"
+						@click="selectedFilters = []"
+					>
+						{{ formatMessage(commonMessages.allProjectType) }}
+					</button>
+					<button
+						v-for="option in filterOptions"
+						:key="option.id"
+						:class="filterPillClass(selectedFilters.includes(option.id))"
+						@click="toggleFilter(option.id)"
+					>
+						{{ option.label }}
+					</button>
+				</div>
+				<ButtonStyled type="transparent" hover-color-fill="none">
+					<button :disabled="refreshingAll" @click="refreshAllWorlds">
+						<RefreshCwIcon :class="refreshingAll ? 'animate-spin' : ''" />
+						{{ formatMessage(commonMessages.refreshButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+			<div class="flex flex-col w-full gap-2">
+				<WorldItem
+					v-for="world in filteredWorlds"
+					:key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
+					:world="world"
+					:managed="world.type === 'server' ? isManagedServerWorld(world) : false"
+					:highlighted="highlightedWorld === getWorldIdentifier(world)"
+					:supports-server-quick-play="supportsServerQuickPlay"
+					:supports-world-quick-play="supportsWorldQuickPlay"
+					:current-protocol="protocolVersion"
+					:playing-instance="playing"
+					:playing-world="worldsMatch(world, worldPlaying)"
+					:starting-instance="startingInstance"
+					:refreshing="world.type === 'server' ? serverData[world.address]?.refreshing : undefined"
+					:server-status="world.type === 'server' ? serverData[world.address]?.status : undefined"
+					:rendered-motd="
+						world.type === 'server' ? serverData[world.address]?.renderedMotd : undefined
+					"
+					:game-mode="world.type === 'singleplayer' ? GAME_MODES[world.game_mode] : undefined"
+					@play="() => joinWorld(world)"
+					@stop="() => emit('stop')"
+					@refresh="() => refreshServer((world as ServerWorld).address)"
+					@edit="
+						() =>
+							world.type === 'singleplayer'
+								? editWorldModal?.show(world)
+								: isManagedServerWorld(world)
+									? undefined
+									: editServerModal?.show(world)
+					"
+					@delete="() => !isManagedServerWorld(world) && promptToRemoveWorld(world)"
+					@open-folder="(world: SingleplayerWorld) => showWorldInFolder(instance.path, world.path)"
+				/>
+			</div>
+		</div>
+		<EmptyState
+			v-else
+			type="empty-inbox"
+			:heading="formatMessage(messages.noWorldsHeading)"
+			:description="formatMessage(messages.noWorldsDescription)"
+		>
+			<template #actions>
 				<ButtonStyled type="outlined">
 					<button class="!h-10 !border-button-bg !border-[1px]" @click="addServerModal?.show()">
 						<PlusIcon class="size-5" />
@@ -70,94 +157,9 @@
 						<span>{{ formatMessage(messages.browseServers) }}</span>
 					</button>
 				</ButtonStyled>
-			</div>
-		</div>
-		<div class="flex flex-wrap items-center justify-between gap-2">
-			<div class="flex flex-wrap items-center gap-1.5">
-				<FilterIcon class="size-5 text-secondary" />
-				<button
-					:class="filterPillClass(selectedFilters.length === 0)"
-					@click="selectedFilters = []"
-				>
-					{{ formatMessage(commonMessages.allProjectType) }}
-				</button>
-				<button
-					v-for="option in filterOptions"
-					:key="option.id"
-					:class="filterPillClass(selectedFilters.includes(option.id))"
-					@click="toggleFilter(option.id)"
-				>
-					{{ option.label }}
-				</button>
-			</div>
-			<ButtonStyled type="transparent" hover-color-fill="none">
-				<button :disabled="refreshingAll" @click="refreshAllWorlds">
-					<RefreshCwIcon :class="refreshingAll ? 'animate-spin' : ''" />
-					{{ formatMessage(commonMessages.refreshButton) }}
-				</button>
-			</ButtonStyled>
-		</div>
-		<div class="flex flex-col w-full gap-2">
-			<WorldItem
-				v-for="world in filteredWorlds"
-				:key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
-				:world="world"
-				:managed="world.type === 'server' ? isManagedServerWorld(world) : false"
-				:highlighted="highlightedWorld === getWorldIdentifier(world)"
-				:supports-server-quick-play="supportsServerQuickPlay"
-				:supports-world-quick-play="supportsWorldQuickPlay"
-				:current-protocol="protocolVersion"
-				:playing-instance="playing"
-				:playing-world="worldsMatch(world, worldPlaying)"
-				:starting-instance="startingInstance"
-				:refreshing="world.type === 'server' ? serverData[world.address]?.refreshing : undefined"
-				:server-status="world.type === 'server' ? serverData[world.address]?.status : undefined"
-				:rendered-motd="
-					world.type === 'server' ? serverData[world.address]?.renderedMotd : undefined
-				"
-				:game-mode="world.type === 'singleplayer' ? GAME_MODES[world.game_mode] : undefined"
-				@play="() => joinWorld(world)"
-				@stop="() => emit('stop')"
-				@refresh="() => refreshServer((world as ServerWorld).address)"
-				@edit="
-					() =>
-						world.type === 'singleplayer'
-							? editWorldModal?.show(world)
-							: isManagedServerWorld(world)
-								? undefined
-								: editServerModal?.show(world)
-				"
-				@delete="() => !isManagedServerWorld(world) && promptToRemoveWorld(world)"
-				@open-folder="(world: SingleplayerWorld) => showWorldInFolder(instance.path, world.path)"
-			/>
-		</div>
-	</div>
-	<EmptyState
-		v-else
-		type="empty-inbox"
-		:heading="formatMessage(messages.noWorldsHeading)"
-		:description="formatMessage(messages.noWorldsDescription)"
-	>
-		<template #actions>
-			<ButtonStyled type="outlined">
-				<button class="!h-10 !border-button-bg !border-[1px]" @click="addServerModal?.show()">
-					<PlusIcon class="size-5" />
-					{{ formatMessage(messages.addServer) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled color="brand">
-				<button
-					class="!h-10 flex items-center gap-2"
-					@click="
-						router.push({ path: '/browse/server', query: { i: instance.path, from: 'worlds' } })
-					"
-				>
-					<CompassIcon class="size-5" />
-					<span>{{ formatMessage(messages.browseServers) }}</span>
-				</button>
-			</ButtonStyled>
-		</template>
-	</EmptyState>
+			</template>
+		</EmptyState>
+	</ReadyTransition>
 </template>
 <script setup lang="ts">
 import { CompassIcon, FilterIcon, PlusIcon, RefreshCwIcon, SearchIcon } from '@modrinth/assets'
@@ -169,11 +171,14 @@ import {
 	GAME_MODES,
 	type GameVersion,
 	injectNotificationManager,
+	ReadyTransition,
 	StyledInput,
+	useReadyState,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { platform } from '@tauri-apps/plugin-os'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import type ContextMenu from '@/components/ui/ContextMenu.vue'
@@ -344,11 +349,21 @@ function toggleFilter(id: string) {
 	}
 }
 
+const queryClient = useQueryClient()
+
 const refreshingAll = ref(false)
 const hadNoWorlds = ref(true)
 const startingInstance = ref(false)
 const worldPlaying = ref<World>()
 
+const worldsQuery = useQuery({
+	queryKey: computed(() => ['worlds', instance.value.path]),
+	queryFn: () => refreshWorlds(instance.value.path),
+	staleTime: 30_000,
+})
+
+const worldsReadyPending = useReadyState(worldsQuery)
+
 const worlds = ref<World[]>([])
 const serverData = ref<Record<string, ServerData>>({})
 
@@ -358,6 +373,26 @@ const isLinux = platform() === 'linux'
 const linuxRefreshCount = ref(0)
 
 const protocolVersion = ref<ProtocolVersion | null>(null)
+
+const gameVersions = ref<GameVersion[]>([])
+const supportsServerQuickPlay = computed(() =>
+	hasServerQuickPlaySupport(gameVersions.value, instance.value.game_version),
+)
+const supportsWorldQuickPlay = computed(() =>
+	hasWorldQuickPlaySupport(gameVersions.value, instance.value.game_version),
+)
+
+watch(
+	() => worldsQuery.data.value,
+	(data) => {
+		if (data) {
+			worlds.value = [...data]
+			refreshServers(worlds.value, serverData.value, protocolVersion.value)
+			hadNoWorlds.value = worlds.value.length === 0
+		}
+	},
+	{ immediate: true },
+)
 const managedServerName = ref<string | null>(null)
 const managedServerAddress = ref<string | null>(null)
 
@@ -385,8 +420,8 @@ async function refreshManagedServerMetadata() {
 
 	try {
 		const [project, projectV3] = await Promise.all([
-			get_project(projectId, 'bypass'),
-			get_project_v3(projectId, 'bypass'),
+			get_project(projectId),
+			get_project_v3(projectId),
 		])
 
 		if (projectV3?.minecraft_server == null) {
@@ -422,27 +457,40 @@ watch(
 	{ immediate: true },
 )
 
-const [unlistenProfile, , resolvedProtocolVersion, resolvedGameVersions] = await Promise.all([
-	profile_listener(async (e: ProfileEvent) => {
-		if (e.profile_path_id !== instance.value.path) return
+let unlistenProfile: (() => void) | null = null
+let worldsTabAlive = true
 
-		console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
+async function initWorldsTab() {
+	const [_unlistenProfile, resolvedProtocolVersion, resolvedGameVersions] = await Promise.all([
+		profile_listener(async (e: ProfileEvent) => {
+			if (e.profile_path_id !== instance.value.path) return
 
-		if (e.event === 'servers_updated') {
-			if (isLinux && linuxRefreshCount.value >= MAX_LINUX_REFRESHES) return
-			if (isLinux) linuxRefreshCount.value++
+			console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
 
-			await refreshAllWorlds()
-		}
+			if (e.event === 'servers_updated') {
+				if (isLinux && linuxRefreshCount.value >= MAX_LINUX_REFRESHES) return
+				if (isLinux) linuxRefreshCount.value++
 
-		await handleDefaultProfileUpdateEvent(worlds.value, instance.value.path, e)
-	}),
-	refreshAllWorlds(),
-	get_profile_protocol_version(instance.value.path).catch(() => null),
-	get_game_versions().catch(() => [] as GameVersion[]),
-])
+				await refreshAllWorlds()
+			}
 
-protocolVersion.value = resolvedProtocolVersion
+			await handleDefaultProfileUpdateEvent(worlds.value, instance.value.path, e)
+		}),
+		get_profile_protocol_version(instance.value.path).catch(() => null),
+		get_game_versions().catch(() => [] as GameVersion[]),
+	])
+
+	if (!worldsTabAlive) {
+		_unlistenProfile()
+		return
+	}
+
+	unlistenProfile = _unlistenProfile
+	protocolVersion.value = resolvedProtocolVersion
+	gameVersions.value = resolvedGameVersions
+}
+
+await initWorldsTab()
 
 async function refreshServer(address: string) {
 	if (!serverData.value[address]) {
@@ -458,26 +506,10 @@ async function refreshAllWorlds() {
 		console.log(`Already refreshing, cancelling refresh.`)
 		return
 	}
-	await refreshManagedServerMetadata()
 
 	refreshingAll.value = true
-
-	worlds.value = await refreshWorlds(instance.value.path).finally(
-		() => (refreshingAll.value = false),
-	)
-	refreshServers(worlds.value, serverData.value, protocolVersion.value)
-
-	const hasNoWorlds = worlds.value.length === 0
-
-	if (hadNoWorlds.value && hasNoWorlds) {
-		setTimeout(() => {
-			refreshingAll.value = false
-		}, 1000)
-	} else {
-		refreshingAll.value = false
-	}
-
-	hadNoWorlds.value = hasNoWorlds
+	await queryClient.invalidateQueries({ queryKey: ['worlds', instance.value.path] })
+	refreshingAll.value = false
 }
 
 async function addServer(server: ServerWorld) {
@@ -592,14 +624,6 @@ function worldsMatch(world: World, other: World | undefined) {
 	return false
 }
 
-const gameVersions = ref<GameVersion[]>(resolvedGameVersions)
-const supportsServerQuickPlay = computed(() =>
-	hasServerQuickPlaySupport(gameVersions.value, instance.value.game_version),
-)
-const supportsWorldQuickPlay = computed(() =>
-	hasWorldQuickPlaySupport(gameVersions.value, instance.value.game_version),
-)
-
 const dedupedWorlds = computed(() => {
 	const visibleWorlds: World[] = []
 	const serverIndexByDomain = new Map<string, number>()
@@ -749,7 +773,8 @@ async function proceedDeleteWorld() {
 	worldToDelete.value = undefined
 }
 
-onUnmounted(() => {
-	unlistenProfile()
+onBeforeUnmount(() => {
+	worldsTabAlive = false
+	unlistenProfile?.()
 })
 </script>

apps/app-frontend/src/providers/setup/loading-state.ts

@@ -0,0 +1,17 @@
+import type { LoadingStateProvider } from '@modrinth/ui'
+import { createLoadingStateCore, provideLoadingState } from '@modrinth/ui'
+
+/**
+ * Source of truth for the desktop app's loading state.
+ *
+ * Owns the token-based ref-counter directly (no Pinia store). Consumers
+ * obtain the same reactive state via `injectLoadingState()` from `@modrinth/ui`.
+ *
+ * Returns the provider so the call site (App.vue) can also use it directly
+ * without a second injection round-trip.
+ */
+export function setupLoadingStateProvider(): LoadingStateProvider {
+	const provider = createLoadingStateCore({ barEnabled: false })
+	provideLoadingState(provider)
+	return provider
+}

apps/app-frontend/src/store/loading.js

@@ -1,19 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useLoading = defineStore('loadingStore', {
-	state: () => ({
-		loading: false,
-		barEnabled: false,
-	}),
-	actions: {
-		setEnabled(enabled) {
-			this.barEnabled = enabled
-		},
-		startLoading() {
-			this.loading = true
-		},
-		stopLoading() {
-			this.loading = false
-		},
-	},
-})

apps/app-frontend/src/store/state.js

@@ -1,5 +1,4 @@
 import { useBreadcrumbs } from './breadcrumbs'
-import { useLoading } from './loading'
 import { useTheming } from './theme.ts'
 
-export { useBreadcrumbs, useLoading, useTheming }
+export { useBreadcrumbs, useTheming }

apps/frontend/src/app.vue

@@ -1,16 +1,15 @@
 <template>
 	<NuxtLayout>
 		<NuxtRouteAnnouncer />
-		<ModrinthLoadingIndicator />
+		<LoadingBar />
 		<NotificationPanel />
 		<I18nDebugPanel />
 		<NuxtPage />
 	</NuxtLayout>
 </template>
 <script setup lang="ts">
-import { I18nDebugPanel, NotificationPanel } from '@modrinth/ui'
+import { I18nDebugPanel, LoadingBar, NotificationPanel } from '@modrinth/ui'
 
-import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator.ts'
 import { setupProviders } from '~/providers/setup.ts'
 
 const auth = await useAuth()

apps/frontend/src/components/ui/modrinth-loading-indicator.ts

@@ -1,142 +0,0 @@
-import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'
-
-import { startLoading, stopLoading, useNuxtApp } from '#imports'
-
-export default defineComponent({
-	name: 'ModrinthLoadingIndicator',
-	props: {
-		throttle: {
-			type: Number,
-			default: 50,
-		},
-		duration: {
-			type: Number,
-			default: 500,
-		},
-		height: {
-			type: Number,
-			default: 3,
-		},
-		color: {
-			type: [String, Boolean],
-			default:
-				'repeating-linear-gradient(to right, var(--color-green) 0%, var(--landing-green-label) 100%)',
-		},
-	},
-	setup(props, { slots }) {
-		const indicator = useLoadingIndicator({
-			duration: props.duration,
-			throttle: props.throttle,
-		})
-
-		const nuxtApp = useNuxtApp()
-		nuxtApp.hook('page:start', () => {
-			startLoading()
-			indicator.start()
-		})
-		nuxtApp.hook('page:finish', () => {
-			stopLoading()
-			indicator.finish()
-		})
-		onBeforeUnmount(() => indicator.clear)
-
-		const loading = useLoading()
-
-		watch(loading, (newValue) => {
-			if (newValue) {
-				indicator.start()
-			} else {
-				indicator.finish()
-			}
-		})
-
-		return () =>
-			h(
-				'div',
-				{
-					class: 'nuxt-loading-indicator',
-					style: {
-						position: 'fixed',
-						top: 0,
-						right: 0,
-						left: 0,
-						pointerEvents: 'none',
-						width: `${indicator.progress.value}%`,
-						height: `${props.height}px`,
-						opacity: indicator.isLoading.value ? 1 : 0,
-						background: props.color || undefined,
-						backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
-						transition: 'width 0.1s, height 0.4s, opacity 0.4s',
-						zIndex: 999999,
-					},
-				},
-				slots,
-			)
-	},
-})
-
-function useLoadingIndicator(opts: { duration: number; throttle: number }) {
-	const progress = ref(0)
-	const isLoading = ref(false)
-	const step = computed(() => 10000 / opts.duration)
-
-	let _timer: any = null
-	let _throttle: any = null
-
-	function start() {
-		clear()
-		progress.value = 0
-		if (opts.throttle && import.meta.client) {
-			_throttle = setTimeout(() => {
-				isLoading.value = true
-				_startTimer()
-			}, opts.throttle)
-		} else {
-			isLoading.value = true
-			_startTimer()
-		}
-	}
-	function finish() {
-		progress.value = 100
-		_hide()
-	}
-
-	function clear() {
-		clearInterval(_timer)
-		clearTimeout(_throttle)
-		_timer = null
-		_throttle = null
-	}
-
-	function _increase(num: number) {
-		progress.value = Math.min(100, progress.value + num)
-	}
-
-	function _hide() {
-		clear()
-		if (import.meta.client) {
-			setTimeout(() => {
-				isLoading.value = false
-				setTimeout(() => {
-					progress.value = 0
-				}, 400)
-			}, 500)
-		}
-	}
-
-	function _startTimer() {
-		if (import.meta.client) {
-			_timer = setInterval(() => {
-				_increase(step.value)
-			}, 100)
-		}
-	}
-
-	return {
-		progress,
-		isLoading,
-		start,
-		finish,
-		clear,
-	}
-}

apps/frontend/src/error.vue

@@ -1,6 +1,6 @@
 <template>
 	<NuxtLayout>
-		<ModrinthLoadingIndicator />
+		<LoadingBar />
 		<NotificationPanel />
 		<div class="main experimental-styles-within">
 			<div v-if="is404" class="error-graphic">
@@ -55,6 +55,7 @@ import { SadRinthbot } from '@modrinth/assets'
 import {
 	defineMessage,
 	IntlFormatted,
+	LoadingBar,
 	normalizeChildren,
 	NotificationPanel,
 	provideModrinthClient,
@@ -65,14 +66,15 @@ import {
 
 import Logo404 from '~/assets/images/404.svg'
 
-import ModrinthLoadingIndicator from './components/ui/modrinth-loading-indicator.ts'
 import { createModrinthClient } from './helpers/api.ts'
 import { FrontendNotificationManager } from './providers/frontend-notifications.ts'
+import { setupLoadingStateProvider } from './providers/setup/loading-state.ts'
 
 const auth = await useAuth()
 const config = useRuntimeConfig()
 
 provideNotificationManager(new FrontendNotificationManager())
+setupLoadingStateProvider()
 
 const client = createModrinthClient(auth.value, {
 	apiBaseUrl: config.public.apiBaseUrl.replace('/v2/', '/'),

apps/frontend/src/pages/hosting/manage/[id].vue

@@ -37,7 +37,8 @@
 </template>
 
 <script setup lang="ts">
-import { ServersManageRootLayout } from '@modrinth/ui'
+import { injectModrinthClient, ServersManageRootLayout } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 
 import { reloadNuxtApp } from '#app'
 import { products } from '~/generated/state.json'
@@ -48,6 +49,21 @@ const router = useRouter()
 const config = useRuntimeConfig()
 const serverId = route.params.id as string
 
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
+if (serverId) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['servers', 'detail', serverId],
+			queryFn: () => client.archon.servers_v0.get(serverId)!,
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
+
 const auth = (await useAuth()) as unknown as {
 	value: { user: { id: string; username: string; email: string; created: string } }
 }

apps/frontend/src/pages/hosting/manage/[id]/backups.vue

@@ -1,9 +1,28 @@
 <script setup lang="ts">
-import { injectModrinthServerContext, ServersManageBackupsPage } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageBackupsPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 
-const { server, isServerRunning } = injectModrinthServerContext()
+const client = injectModrinthClient()
+const { server, serverId, worldId, isServerRunning } = injectModrinthServerContext()
+const queryClient = useQueryClient()
 const flags = useFeatureFlags()
 
+if (worldId.value) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['backups', 'list', serverId],
+			queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
+
 useHead({
 	title: `Backups - ${server.value?.name ?? 'Server'} - Modrinth`,
 })

apps/frontend/src/pages/hosting/manage/[id]/content.vue

@@ -1,7 +1,27 @@
 <script setup lang="ts">
-import { injectModrinthServerContext, ServersManageContentPage } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageContentPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 
-const { server } = injectModrinthServerContext()
+const client = injectModrinthClient()
+const { server, serverId, worldId } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+if (worldId.value) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['content', 'list', 'v1', serverId],
+			queryFn: () =>
+				client.archon.content_v1.getAddons(serverId, worldId.value!, { from_modpack: false }),
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
 
 useHead({
 	title: `Content - ${server.value?.name ?? 'Server'} - Modrinth`,

apps/frontend/src/pages/hosting/manage/[id]/files.vue

@@ -1,9 +1,26 @@
 <script setup lang="ts">
-import { injectModrinthServerContext, ServersManageFilesPage } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageFilesPage,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 
-const { server } = injectModrinthServerContext()
+const client = injectModrinthClient()
+const { server, serverId } = injectModrinthServerContext()
+const queryClient = useQueryClient()
 const flags = useFeatureFlags()
 
+try {
+	await queryClient.ensureQueryData({
+		queryKey: ['files', serverId, '/'],
+		queryFn: () => client.kyros.files_v0.listDirectory('/', 1, 2000),
+		staleTime: 30_000,
+	})
+} catch {
+	// Let mounted layouts' useQuery surface errors; do not fail route setup.
+}
+
 useHead({
 	title: computed(() => `Files - ${server.value?.name ?? 'Server'} - Modrinth`),
 })

apps/frontend/src/providers/setup.ts

@@ -3,6 +3,7 @@ import { provideNotificationManager } from '@modrinth/ui'
 import { FrontendNotificationManager } from './frontend-notifications'
 import { setupAuthProvider } from './setup/auth'
 import { setupFilePickerProvider } from './setup/file-picker'
+import { setupLoadingStateProvider } from './setup/loading-state'
 import { setupModrinthClientProvider } from './setup/modrinth-client'
 import { setupPageContextProvider } from './setup/page-context'
 import { setupTagsProvider } from './setup/tags'
@@ -15,4 +16,5 @@ export function setupProviders(auth: Awaited<ReturnType<typeof useAuth>>) {
 	setupTagsProvider()
 	setupFilePickerProvider()
 	setupPageContextProvider()
+	setupLoadingStateProvider()
 }

apps/frontend/src/providers/setup/loading-state.ts

@@ -0,0 +1,49 @@
+import type { LoadingStateProvider } from '@modrinth/ui'
+import { createLoadingStateCore, provideLoadingState } from '@modrinth/ui'
+import { watch } from 'vue'
+
+/**
+ * Initialize the cross-platform loading-state provider for the website.
+ *
+ * Responsibilities:
+ * 1. Own the token-based ref-counter that drives `LoadingBar` and `ReadyTransition`.
+ * 2. Bridge the legacy `useState('loading')` global so the many existing
+ *    `startLoading()` / `stopLoading()` call sites continue to raise the bar.
+ * 3. Register Nuxt `page:start` / `page:finish` hooks so route navigation
+ *    auto-fires the bar (replaces the behavior previously inside
+ *    `modrinth-loading-indicator.ts`).
+ */
+export function setupLoadingStateProvider(): LoadingStateProvider {
+	const provider = createLoadingStateCore({ barEnabled: true })
+	provideLoadingState(provider)
+
+	const legacyState = useLoading()
+	let legacyToken: symbol | null = null
+	watch(
+		legacyState,
+		(value) => {
+			if (value && !legacyToken) {
+				legacyToken = provider.begin()
+			} else if (!value && legacyToken) {
+				provider.end(legacyToken)
+				legacyToken = null
+			}
+		},
+		{ immediate: true },
+	)
+
+	const nuxtApp = useNuxtApp()
+	let pageToken: symbol | null = null
+	nuxtApp.hook('page:start', () => {
+		if (pageToken) provider.end(pageToken)
+		pageToken = provider.begin()
+	})
+	nuxtApp.hook('page:finish', () => {
+		if (pageToken) {
+			provider.end(pageToken)
+			pageToken = null
+		}
+	})
+
+	return provider
+}