feat: improve loading flow when there are dependencies, to not show compatible version until all data is loaded

apps/frontend/src/components/ui/ProjectDownloadModal/DownloadProject.vue

@@ -80,7 +80,7 @@
 		</Combobox>
 	</div>
 
-	<div v-if="selectedVersion" class="flex flex-col gap-2.5">
+	<div v-if="selectedVersion && downloadDataLoaded" class="flex flex-col gap-2.5">
 		<h3
 			v-if="[...suggestedPreReleaseVersions, selectedVersion].length > 1"
 			class="relative top-0.5 m-0 text-base font-semibold text-contrast"
@@ -163,6 +163,7 @@ const props = withDefaults(
 		project: DownloadModalProject
 		versions?: Labrinth.Versions.v3.Version[]
 		dependencyDownloadFiles?: DownloadableFile[]
+		downloadDataLoaded?: boolean
 		downloadReason?: CdnDownloadReason
 		initialGameVersion?: string | null
 		initialPlatform?: string | null
@@ -173,6 +174,7 @@ const props = withDefaults(
 	{
 		versions: () => [],
 		dependencyDownloadFiles: () => [],
+		downloadDataLoaded: false,
 		downloadReason: 'standalone',
 		initialGameVersion: null,
 		initialPlatform: null,

apps/frontend/src/components/ui/ProjectDownloadModal/download-modal-provider.ts

@@ -52,6 +52,7 @@ export interface ProjectDownloadSelection {
 interface DownloadModalProviderOptions {
 	project: ComputedRef<DownloadModalProject | null>
 	selectedVersion: ComputedRef<Labrinth.Versions.v3.Version | null>
+	selectedPrimaryFile: ComputedRef<Labrinth.Versions.v3.VersionFile | null>
 	currentGameVersion: ComputedRef<string | null>
 	currentPlatform: ComputedRef<string | null>
 	downloadReason: ComputedRef<CdnDownloadReason>
@@ -62,6 +63,7 @@ export interface DownloadModalProvider {
 	visibleDependencyRows: ComputedRef<DownloadDependencyRow[]>
 	duplicateDependencyRowsHidden: ComputedRef<boolean>
 	downloadRows: ComputedRef<DownloadDependencyRow[]>
+	downloadRowsLoaded: ComputedRef<boolean>
 	downloadableDependencyFiles: ComputedRef<DownloadableDependencyFile[]>
 	downloadableDependencyFilesLoaded: ComputedRef<boolean>
 	preloadDependenciesForSelection: (selection: ProjectDownloadSelection) => Promise<void>
@@ -187,6 +189,11 @@ export function provideDownloadModalProvider(
 		return true
 	})
 
+	const downloadRowsLoaded = computed(() => {
+		if (!options.selectedPrimaryFile.value) return false
+		return dependenciesLoaded.value
+	})
+
 	const resolvedDependencyRows = computed<DownloadDependencyRow[]>(() => {
 		if (!dependenciesLoaded.value) return []
 
@@ -207,37 +214,40 @@ export function provideDownloadModalProvider(
 	)
 
 	const duplicateDependencyRowsHidden = computed(() =>
-		hasSkippedDuplicateDependency(dependencyResolution.value) ||
-		hasDuplicateDependencyRows(resolvedDependencyRows.value),
+		downloadRowsLoaded.value &&
+		(hasSkippedDuplicateDependency(dependencyResolution.value) ||
+			hasDuplicateDependencyRows(resolvedDependencyRows.value)),
 	)
 
 	const additionalFileRows = computed<DownloadDependencyRow[]>(() =>
-		options.additionalFiles.value.map((file) => ({
-			key: `additional-file-${additionalFileKey(file)}`,
-			name: file.filename,
-			fallbackIcon: FileIcon,
-			downloadHref: getDownloadUrl(file.url),
-			filename: file.filename,
-			fileSize: file.size,
-			metadataLabel: fileTypeLabel(file.file_type),
-			typeLabel: fileTypeLabel(file.file_type),
-			unavailableTooltip: formatMessage(messages.unavailableFile),
-			dependencies: [],
-		})),
+		downloadRowsLoaded.value
+			? options.additionalFiles.value.map((file) => ({
+					key: `additional-file-${additionalFileKey(file)}`,
+					name: file.filename,
+					fallbackIcon: FileIcon,
+					downloadHref: getDownloadUrl(file.url),
+					filename: file.filename,
+					fileSize: file.size,
+					metadataLabel: fileTypeLabel(file.file_type),
+					typeLabel: fileTypeLabel(file.file_type),
+					unavailableTooltip: formatMessage(messages.unavailableFile),
+					dependencies: [],
+				}))
+			: [],
 	)
 
-	const downloadRows = computed<DownloadDependencyRow[]>(() => [
-		...visibleDependencyRows.value,
-		...additionalFileRows.value,
-	])
+	const downloadRows = computed<DownloadDependencyRow[]>(() =>
+		downloadRowsLoaded.value
+			? [...visibleDependencyRows.value, ...additionalFileRows.value]
+			: [],
+	)
 
 	const downloadableDependencyFiles = computed<DownloadableDependencyFile[]>(() =>
 		collectDownloadableDependencyFiles(visibleDependencyRows.value),
 	)
 
 	const downloadableDependencyFilesLoaded = computed(() => {
-		if (!shouldResolveDependencies.value) return false
-		return dependenciesLoaded.value
+		return downloadRowsLoaded.value
 	})
 
 	async function preloadDependenciesForSelection(selection: ProjectDownloadSelection) {
@@ -355,6 +365,7 @@ export function provideDownloadModalProvider(
 		visibleDependencyRows,
 		duplicateDependencyRowsHidden,
 		downloadRows,
+		downloadRowsLoaded,
 		downloadableDependencyFiles,
 		downloadableDependencyFilesLoaded,
 		preloadDependenciesForSelection,

apps/frontend/src/components/ui/ProjectDownloadModal/index.vue

@@ -19,6 +19,7 @@
 					:project="project"
 					:versions="versions"
 					:dependency-download-files="dependencyDownloadFiles"
+					:download-data-loaded="downloadRowsLoaded"
 					:download-reason="downloadReason"
 					:initial-game-version="initialGameVersion"
 					:initial-platform="initialPlatform"
@@ -271,6 +272,7 @@ const additionalFiles = computed(() => {
 const downloadModalProvider = provideDownloadModalProvider({
 	project,
 	selectedVersion,
+	selectedPrimaryFile,
 	currentGameVersion,
 	currentPlatform,
 	downloadReason: computed(() => props.downloadReason),
@@ -278,6 +280,7 @@ const downloadModalProvider = provideDownloadModalProvider({
 })
 const dependencyDownloadFiles = downloadModalProvider.downloadableDependencyFiles
 const dependencyDownloadFilesLoaded = downloadModalProvider.downloadableDependencyFilesLoaded
+const downloadRowsLoaded = downloadModalProvider.downloadRowsLoaded
 
 const selectedVersionDownloadFiles = computed<DownloadableFile[]>(() => {
 	if (!selectedVersion.value) return []