From 3dd5314062f46883039ee4d7e4f0924ab099ec31 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 28 Jan 2026 17:52:32 -0800
Subject: [PATCH] Add loading state to envs

---
 .../pages/[type]/[id]/settings/environment.vue  | 12 +++++++++---
 .../environment/EnvironmentMigration.vue        | 17 +++++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
index 2e91ab86a..c164c91e0 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/environment.vue
@@ -1,5 +1,6 @@
 <template>
-	<div v-if="showEnvironmentMigration" class="card experimental-styles-within">
+	<LoadingIndicator v-if="!projectV3" class="py-6" />
+	<div v-else-if="showEnvironmentMigration" class="card experimental-styles-within">
 		<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">Project environment</h2>
 		<EnvironmentMigration />
 	</div>
@@ -25,10 +26,15 @@
 
 <script setup lang="ts">
 import { SettingsIcon } from '@modrinth/assets'
-import { ButtonStyled, EnvironmentMigration, injectProjectPageContext } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	EnvironmentMigration,
+	injectProjectPageContext,
+	LoadingIndicator,
+} from '@modrinth/ui'
 import { isStaff } from '@modrinth/utils'
 
-const { currentMember, projectV2 } = injectProjectPageContext()
+const { currentMember, projectV2, projectV3 } = injectProjectPageContext()
 
 const showEnvironmentMigration = computed(() => {
 	return isStaff(currentMember.value?.user)
diff --git a/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
index 74d360066..383f22fff 100644
--- a/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
+++ b/packages/ui/src/components/project/settings/environment/EnvironmentMigration.vue
@@ -21,14 +21,14 @@ const { handleError } = injectNotificationManager()
 const client = injectModrinthClient()
 
 const supportsEnvironment = computed(() =>
-	projectV3.value.project_types.some((type) => ['mod', 'modpack'].includes(type)),
+	(projectV3.value?.project_types ?? []).some((type) => ['mod', 'modpack'].includes(type)),
 )
 
 const needsToVerify = computed(
 	() =>
-		projectV3.value.side_types_migration_review_status === 'pending' &&
-		(projectV3.value.environment?.length ?? 0) > 0 &&
-		projectV3.value.environment?.[0] !== 'unknown' &&
+		projectV3.value?.side_types_migration_review_status === 'pending' &&
+		(projectV3.value?.environment?.length ?? 0) > 0 &&
+		projectV3.value?.environment?.[0] !== 'unknown' &&
 		supportsEnvironment.value,
 )
 
@@ -38,13 +38,14 @@ const hasPermission = computed(() => {
 })
 
 function getInitialEnv() {
-	return projectV3.value.environment?.length === 1 ? projectV3.value.environment[0] : undefined
+	const env = projectV3.value?.environment
+	return env?.length === 1 ? env[0] : undefined
 }
 
 const { saved, current, saving, reset, save } = useSavable(
 	() => ({
 		environment: getInitialEnv(),
-		side_types_migration_review_status: projectV3.value.side_types_migration_review_status,
+		side_types_migration_review_status: projectV3.value?.side_types_migration_review_status,
 	}),
 	async ({ environment }) => {
 		try {
@@ -130,7 +131,7 @@ const messages = defineMessages({
 			/>
 			<Admonition
 				v-else-if="
-					!projectV3.environment ||
+					!projectV3?.environment ||
 					projectV3.environment.length === 0 ||
 					(projectV3.environment.length === 1 && projectV3.environment[0] === 'unknown')
 				"
@@ -140,7 +141,7 @@ const messages = defineMessages({
 				class="mb-3"
 			/>
 			<Admonition
-				v-else-if="projectV3.environment.length > 1"
+				v-else-if="(projectV3?.environment?.length ?? 0) > 1"
 				type="info"
 				:header="formatMessage(messages.multipleEnvironmentsTitle)"
 				:body="formatMessage(messages.multipleEnvironmentsDescription)"