From 4a3f9e3cbe0a01d5ef591b639ec01997c6b79f96 Mon Sep 17 00:00:00 2001
From: Craig Osterhout <craig.osterhout@docker.com>
Date: Wed, 14 Jan 2026 11:50:05 -0800
Subject: [PATCH] homepage: update download component (#23978)

<!--Delete sections as needed -->

## Description

This might be a my computer thing (because my computer probably isn't
the fastest), but the component often flickers on load.

- ~Removed x-collapse and~ added x-cloak to prevent the drop-down from
appearing expanded before the js loads.
- Changed the button text to static, so it's not waiting for the OS
detection to load.

## Related issues or tickets

ENGDOCS-3149

## Reviews

<!-- Notes for reviewers here -->
<!-- List applicable reviews (optionally @tag reviewers) -->

- [ ] Editorial review

---------

Signed-off-by: Craig Osterhout <craig.osterhout@docker.com>
---
 layouts/index.html | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index 3d9e8f37ce..2acc06748c 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -60,10 +60,6 @@
 							'linux': 'Docker Desktop for Linux'
 						};
 						return labels[os === 'linux' ? 'linux' : `${os}-${arch}`] || 'Docker Desktop';
-					},
-					getPrimaryLabel() {
-						if (this.os === 'unknown') return 'Download Docker Desktop';
-						return this.getOsLabel(this.os, this.arch);
 					}
 				}"
 				@click.outside="open = false">
@@ -83,7 +79,7 @@
 								<a :href="getDownloadUrl(os, arch)"
 									class="bg-blue flex cursor-pointer items-center gap-2 p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 whitespace-nowrap">
 									<span class="icon-svg icon-sm">{{ partial "icon" "download" }}</span>
-									<span x-text="getPrimaryLabel()">Download Docker Desktop</span>
+									<span>Download Docker Desktop</span>
 								</a>
 								<button @click="open = !open" type="button"
 									class="bg-blue flex items-center justify-center px-3 text-white border-l border-blue-400 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-300"
@@ -93,7 +89,7 @@
 									</svg>
 								</button>
 							</div>
-							<div x-show="open" x-collapse
+							<div x-show="open" x-collapse x-cloak
 								class="absolute top-full left-0 mt-1 min-w-full bg-white dark:bg-gray-800 rounded-sm shadow-lg overflow-hidden z-50">
 								<a href="https://desktop.docker.com/mac/main/arm64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-arm64"
 									class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">