Skip to content

Show loader for disabled checkbox for download-as-default landing page - WT127 (fix #433)#905

Open
wen-2018 wants to merge 2 commits intomainfrom
ui-improvement-for-landing-checkbox
Open

Show loader for disabled checkbox for download-as-default landing page - WT127 (fix #433)#905
wen-2018 wants to merge 2 commits intomainfrom
ui-improvement-for-landing-checkbox

Conversation

@wen-2018
Copy link
Collaborator

@wen-2018 wen-2018 commented Jan 16, 2026

One-line summary

This PR adds a loader for temporarily disabled checkbox for Windows landing page download-as-default option.

Significant changes and points to review

Firefox on Windows landing page download-as-default checkbox.

Issue / Bugzilla link

https://mozilla-hub.atlassian.net/browse/WT-127?atlOrigin=eyJpIjoiMjgyY2E5YThjOWU2NGRmMWI1MzliMjE4YmYwYzY0ODgiLCJwIjoiaiJ9
#433

Testing

http://localhost:8000/en-US Firefox on Windows

@wen-2018 wen-2018 added the WIP Work in progress label Jan 16, 2026
@wen-2018 wen-2018 force-pushed the ui-improvement-for-landing-checkbox branch 2 times, most recently from 7030c8b to 9e131b0 Compare January 19, 2026 16:26
@wen-2018 wen-2018 changed the title animation experiment Show loader for disabled checkbox for download-as-default landing page Jan 19, 2026
@wen-2018 wen-2018 changed the title Show loader for disabled checkbox for download-as-default landing page Show loader for disabled checkbox for download-as-default landing page - WT127 (fix #433) Jan 19, 2026
@codecov
Copy link

codecov bot commented Jan 19, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.73%. Comparing base (3d923d5) to head (a98fa0f).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #905      +/-   ##
==========================================
- Coverage   82.14%   81.73%   -0.41%     
==========================================
  Files         117      113       -4     
  Lines        6210     6022     -188     
==========================================
- Hits         5101     4922     -179     
+ Misses       1109     1100       -9     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@wen-2018 wen-2018 force-pushed the ui-improvement-for-landing-checkbox branch from 9e131b0 to 5423ebf Compare January 19, 2026 16:36
@wen-2018 wen-2018 added Frontend HTML, CSS, JS... client side stuff Needs Review Awaiting code review and removed WIP Work in progress labels Jan 19, 2026
@wen-2018 wen-2018 marked this pull request as ready for review January 19, 2026 17:02
@maureenlholland maureenlholland self-assigned this Feb 11, 2026
Copy link
Collaborator

@maureenlholland maureenlholland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

requested change: spinner animation with no layout shift

suggested changes are non-blocking

checkboxes[i].style.display = 'none';
}

for (let i = 0; i < checkboxes.length; i++) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
for (let i = 0; i < checkboxes.length; i++) {
for (let i = 0; i < loadingSigns.length; i++) {

const checkboxes = document.querySelectorAll('.default-browser-checkbox');
const loadingSigns = document.querySelectorAll('.loading');

for (let i = 0; i < checkboxes.length; i++) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
for (let i = 0; i < checkboxes.length; i++) {
for (let i = 0; i < loadingSigns.length; i++) {

display: inline-block;
width: 24px;
height: 24px;
background: url('/media/img/icons/loading.svg') no-repeat center;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is causing some layout shift, and it's a tough fit in general because the aspect ratio of the dots is more rectangular.

Image Image

A spinner is probably going to fix into the square aspect ratio better: https://css-loaders.com/spinner/

@maureenlholland maureenlholland removed the Needs Review Awaiting code review label Feb 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Frontend HTML, CSS, JS... client side stuff

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants