fix: project version page dependencies showing "unknown project" unless refresh (#5366)

* fix not updating stale dependencies

* remove console log

* fix wragnler json formatting

* add proper loading dependencies

* pnpm prepr

* move v-if

apps/frontend/src/pages/[type]/[id]/version/[version].vue

@@ -207,6 +207,10 @@
 			class="version-page__dependencies universal-card"
 		>
 			<h3>Dependencies</h3>
+
+			<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"
@@ -250,6 +254,7 @@
 						</button>
 					</ButtonStyled>
 				</div>
+
 				<div
 					v-for="(dependency, index) in sortedDeps.filter((x) => x.file_name)"
 					:key="index"
@@ -263,6 +268,7 @@
 						<span class="dep-type" :class="dependency.dependency_type">Added via overrides</span>
 					</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,8 +653,12 @@ alternateFile.value = version.value.files?.find(
 )
 
 // Process dependencies
-const deps = contextDependencies.value ?? { projects: [], versions: [] }
-for (const dependency of version.value.dependencies ?? []) {
+watch(
+	[contextDependencies],
+	() => {
+		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)
 
 			if (dependency.version) {
@@ -657,7 +674,11 @@ for (const dependency of version.value.dependencies ?? []) {
 						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,