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>
This commit is contained in:
Craig Osterhout
2026-01-14 11:50:05 -08:00
committed by GitHub
parent 319848abfc
commit 4a3f9e3cbe

View File

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