diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 460ee22175..27caa93b61 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -207,62 +207,68 @@
 			class="version-page__dependencies universal-card"
 		>
 			<h3>Dependencies</h3>
-			<div
-				v-for="(dependency, index) in sortedDeps.filter((x) => !x.file_name)"
-				:key="index"
-				class="dependency"
-				:class="{ 'button-transparent': !isEditing }"
-				@click="!isEditing ? router.push(dependency.link) : {}"
-			>
-				<Avatar
-					:src="dependency.project ? dependency.project.icon_url : null"
-					alt="dependency-icon"
-					size="sm"
-				/>
-				<nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
-					<span class="project-title">
-						{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
-					</span>
-					<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
-						Version {{ dependency.version.version_number }} is
-						{{ dependency.dependency_type }}
-					</span>
-					<span v-else class="dep-type" :class="dependency.dependency_type">
-						{{ dependency.dependency_type }}
-					</span>
-				</nuxt-link>
-				<div v-else class="info">
-					<span class="project-title">
-						{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
-					</span>
-					<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
-						Version {{ dependency.version.version_number }} is
-						{{ dependency.dependency_type }}
-					</span>
-					<span v-else class="dep-type" :class="dependency.dependency_type">
-						{{ dependency.dependency_type }}
-					</span>
+
+			<div v-if="dependenciesLoading"><SpinnerIcon /> Loading dependencies...</div>
+
+			<template v-if="!dependenciesLoading">
+				<div
+					v-for="(dependency, index) in sortedDeps.filter((x) => !x.file_name)"
+					:key="index"
+					class="dependency"
+					:class="{ 'button-transparent': !isEditing }"
+					@click="!isEditing ? router.push(dependency.link) : {}"
+				>
+					<Avatar
+						:src="dependency.project ? dependency.project.icon_url : null"
+						alt="dependency-icon"
+						size="sm"
+					/>
+					<nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
+						<span class="project-title">
+							{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
+						</span>
+						<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
+							Version {{ dependency.version.version_number }} is
+							{{ dependency.dependency_type }}
+						</span>
+						<span v-else class="dep-type" :class="dependency.dependency_type">
+							{{ dependency.dependency_type }}
+						</span>
+					</nuxt-link>
+					<div v-else class="info">
+						<span class="project-title">
+							{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
+						</span>
+						<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
+							Version {{ dependency.version.version_number }} is
+							{{ dependency.dependency_type }}
+						</span>
+						<span v-else class="dep-type" :class="dependency.dependency_type">
+							{{ dependency.dependency_type }}
+						</span>
+					</div>
+					<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
+						<button @click="version.dependencies.splice(index, 1)">
+							<TrashIcon aria-hidden="true" />
+							Remove
+						</button>
+					</ButtonStyled>
 				</div>
-				<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
-					<button @click="version.dependencies.splice(index, 1)">
-						<TrashIcon aria-hidden="true" />
-						Remove
-					</button>
-				</ButtonStyled>
-			</div>
-			<div
-				v-for="(dependency, index) in sortedDeps.filter((x) => x.file_name)"
-				:key="index"
-				class="dependency"
-			>
-				<Avatar alt="dependency-icon" size="sm" />
-				<div class="info">
-					<span class="project-title">
-						{{ dependency.file_name }}
-					</span>
-					<span class="dep-type" :class="dependency.dependency_type">Added via overrides</span>
+
+				<div
+					v-for="(dependency, index) in sortedDeps.filter((x) => x.file_name)"
+					:key="index"
+					class="dependency"
+				>
+					<Avatar alt="dependency-icon" size="sm" />
+					<div class="info">
+						<span class="project-title">
+							{{ dependency.file_name }}
+						</span>
+						<span class="dep-type" :class="dependency.dependency_type">Added via overrides</span>
+					</div>
 				</div>
-			</div>
+			</template>
 		</div>
 		<div class="version-page__files universal-card">
 			<h3>Files</h3>
@@ -415,6 +421,7 @@ import {
 	ReportIcon,
 	RightArrowIcon,
 	SaveIcon,
+	SpinnerIcon,
 	StarIcon,
 	TrashIcon,
 	XIcon,
@@ -465,6 +472,7 @@ const {
 	versions: contextVersions,
 	loadVersions,
 	dependencies: contextDependencies,
+	dependenciesLoading: contextDependenciesLoading,
 	loadDependencies,
 	invalidate,
 } = injectProjectPageContext()
@@ -494,6 +502,11 @@ const showKnownErrors = ref(false)
 const shouldPreventActions = ref(false)
 const uploadedImageIds = ref<string[]>([])
 
+const dependenciesMetaLoading = ref(true)
+const dependenciesLoading = computed(
+	() => contextDependenciesLoading.value || dependenciesMetaLoading.value,
+)
+
 // File types constant
 const fileTypes = ref([
 	{
@@ -640,24 +653,32 @@ alternateFile.value = version.value.files?.find(
 )
 
 // Process dependencies
-const deps = contextDependencies.value ?? { projects: [], versions: [] }
-for (const dependency of version.value.dependencies ?? []) {
-	dependency.version = deps.versions.find((x: any) => x.id === dependency.version_id)
+watch(
+	[contextDependencies],
+	() => {
+		const deps = contextDependencies.value ?? { projects: [], versions: [] }
 
-	if (dependency.version) {
-		dependency.project = deps.projects.find((x: any) => x.id === dependency.version.project_id)
-	}
+		for (const dependency of version.value.dependencies ?? []) {
+			dependency.version = deps.versions.find((x: any) => x.id === dependency.version_id)
 
-	if (!dependency.project) {
-		dependency.project = deps.projects.find((x: any) => x.id === dependency.project_id)
-	}
+			if (dependency.version) {
+				dependency.project = deps.projects.find((x: any) => x.id === dependency.version.project_id)
+			}
 
-	dependency.link = dependency.project
-		? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
-				dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
-			}`
-		: ''
-}
+			if (!dependency.project) {
+				dependency.project = deps.projects.find((x: any) => x.id === dependency.project_id)
+			}
+
+			dependency.link = dependency.project
+				? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
+						dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
+					}`
+				: ''
+		}
+		dependenciesMetaLoading.value = false
+	},
+	{ deep: true, immediate: true },
+)
 
 oldFileTypes.value = (version.value.files ?? []).map(
 	(x: any) => fileTypes.value.find((y) => y.value === x.file_type) ?? null,
diff --git a/packages/ui/wrangler.jsonc b/packages/ui/wrangler.jsonc
index 198678fba1..bdd4196e11 100644
--- a/packages/ui/wrangler.jsonc
+++ b/packages/ui/wrangler.jsonc
@@ -1,8 +1,8 @@
 {
-  "name": "storybook",
-  "compatibility_date": "2026-02-12",
-  "workers_dev": true,
-  "assets": {
-    "directory": "./storybook-static"
-  }
+	"name": "storybook",
+	"compatibility_date": "2026-02-12",
+	"workers_dev": true,
+	"assets": {
+		"directory": "./storybook-static"
+	}
 }