Add loading state to envs

Author: Prospector

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)

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)"