Skip to content

feat(ui): spin the arrow on "Check now" and "Check again" - #982

Open
adnan-bhaldar wants to merge 3 commits into
KnifeLemon:mainfrom
adnan-bhaldar:ui/spin-arrow-on-check-buttons
Open

adnan-bhaldar wants to merge 3 commits into
KnifeLemon:mainfrom
adnan-bhaldar:ui/spin-arrow-on-check-buttons

Conversation

@adnan-bhaldar

Copy link
Copy Markdown
Contributor

Tip

Start the title with a prefix so the PR is labeled automatically: feat: fix: docs: ci: build: i18n:
Example: fix(hwp): keep tables when converting to DOCX

What does this change?

Adds a refresh arrow to the "Check now" button (About) and the "Check again" button (Engines). The arrow turns while the check runs, which looks more professional and shows the app is working. With Reduce animations on (or the system asking for reduced motion) it does not spin and the result is not held back.

The turning is done in code (src/Filee.App/Controls/Spin.cs, an attached property Spin.IsActive), not with a XAML style in Soft.axaml. I first wrote it as a Style.Animations rule for PathIcon.check-arrow.spinning in Soft.axaml. With that rule present, the dropdown chevron on every ComboBox stopped flipping when opened, even though the rule only matches the check arrow. Removing the rule fixed the chevron, and simplifying its selector did not. I don't know the exact reason, so the animation is kept out of the shared styles. Spin.cs sits in Controls because that folder holds Filee's own controls and helpers, and Soft.axaml is for Avalonia's own controls and is shared with the installer.

Type of change

  • Bug fix
  • New feature or improvement
  • New format or engine
  • Translation
  • Documentation
  • Build, CI or dependencies

How was it tested?

  • dotnet format --verify-no-changes
  • dotnet test
  • Tried it in the app (what you converted or clicked, and on which OS): clicked Check now on the About page and Check again on the Engines page on Windows. The arrow turns while checking and stops when done. With Reduce animations on it stays still.

Screenshots (UI changes)

None: the change is an animation, which a still image can't show.

Checklist

  • New UI strings are in all src/Filee.App/Assets/i18n/*.json files (no new strings)
  • New third-party code or binaries are listed in THIRD-PARTY-NOTICES.md (none added)
  • The PR does one thing (unrelated changes go in a separate PR)

The Check now button on the About page only disabled itself while an update check ran, so a quick click looked like nothing happened. It now has a refresh arrow in front of the label that turns for as long as the check runs. It looks more professional and shows the app is working.

The arrow is the drawn Icon.Refresh, not a text character, so it turns around its own center. A check can finish in a blink, so the result is held back for 900 ms to let the arrow make about one full turn.

The turning is done in code by a new attached property, Spin.IsActive (Controls/Spin.cs), not by a XAML animation in Soft.axaml. A Style.Animations rule for the arrow in Soft.axaml stopped the ComboBox dropdown chevron from flipping, even though the rule only matched the check arrow. Spin.cs is in Controls because that folder holds Filee's own controls and helpers, while Soft.axaml is for Avalonia's own controls and is shared with the installer.

With Reduce animations on (or the system asking for reduced motion) the arrow does not spin and the result is not held back.
Same as Check now on the About page: Check again on the Engines page gets the refresh arrow, which turns while the recheck runs. It looks more professional and shows the app is working.

Recheck is now async so the button knows when it is running, and it keeps the arrow turning for at least 900 ms. It uses Spin.IsActive from Controls/Spin.cs, so no style was added to Soft.axaml.

With Reduce animations on there is no spin and no 900 ms hold.
@github-actions github-actions Bot added the feature New features label Nov 1, 2026
In the Material You theme the whole ToggleSwitch scaled up by 2% on hover. The switch's text label is part of the same control, so the label grew along with the track and knob, which looked like the text jumping.

The hover scale (ToggleSwitch:pointerover with scale(1.02)) is removed. The track and knob keep their colour change on hover and the springy transition on the switch is unchanged.

Only Soft.axaml changes, and only the Material You ToggleSwitch block.
@adnan-bhaldar

Copy link
Copy Markdown
Contributor Author

CI failed on one unrelated test: BrowserDropTests.Other_text_does_not_offer_files_to_the_donut
("ordinary text"), with "AppHost not built". The build succeeded and the tests for the
About and Engines pages passed. It looks like a flaky start-up ordering problem. Could
you re-run the failed jobs? Happy to push a new commit instead if you prefer.

@KnifeLemon KnifeLemon left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

Thanks, @adnan-bhaldar. The turning arrow is a nice touch, and the details are right:

  • it doesn't turn with Reduce animations on, and then the result isn't held back either;
  • the minimum turn of 900 ms keeps a quick check from looking like nothing happened.

Keeping it out of Soft.axaml after the ComboBox chevron problem is the safe choice, and the comment says why.

Two small changes before merging:

1. One DetachedFromVisualTree handler per start

Spin.Start adds control.DetachedFromVisualTree += (_, _) => Stop(control); every time the arrow starts, and nothing removes it. Each click of Check now or Check again leaves one more handler on the icon. Stop is safe to call twice, so nothing breaks, but the handlers pile up for as long as the page lives.

Keep the handler in State and add it once (or remove it in Stop). For example: subscribe when the State is created, and only start or stop the timer after that.

2. The ToggleSwitch change isn't part of this PR

Soft.axaml also removes the scale(1.02) hover on Material You's ToggleSwitch. The reason in the comment makes sense: the label is part of the control, so the text grew with it. But it's a separate change from the arrow, and the PR body doesn't mention it. Please either:

  • move it to its own small PR, or
  • add a line about it to this PR's description,

so it shows up in the history for what it is.

CI

The Linux jobs failed in BrowserDropTests ("AppHost not built"), which this PR doesn't touch. I've re-run them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New features

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants