animations: Support reduced motion

[yukijoou]

Most animations in gitea are handled by fomantic-ui, but as it doesn't support reduced motion, this commit adds a hacky workaround to force-disable motion animations. It also makes gitea's built-in animations respect reduced-motion.

---

I tried patching the issue upstream, but gave up after a few hours because of how messy and hard to work with their codebase is. This fixes #15709.

[silverwind]

We can likely get rid of the whole transition module of fomantic which would eliminate all the menu transitions and such. Only problem with that is that it needs a few JS "shims" so that fomantic won't error when the module is absent. But I do see it as a long-term goal to remove all these transitions, for all users.

In case you want to try it, remove this line and run make fomantic to see the errors.

[yukijoou]

But I do see it as a long-term goal to remove all these transitions, for all users.

From the issue thread linked though it seems some people like the animations… which is why I wen that route instead

whatever the long term solution is, could this be applied in the meantime? it's an accessibility issue, and though it probably doesn't impact many people, and we could work around it with css applied in the useragent, it'd be great to do something about it!

I'll look into removing the animation module in the meantime

edit: Looked into fomantic's issues when disabling transitions, and it seems like it uses javascript tricks that obscure how it works… I'd probably need to figure out how to set up a proper dev environment, and really don't feel like digging into that right now. I've already spend hours debugging their libraries for issues like this, and gave up

[yukijoou]

Removed the unused rules for the static transitions, and simplified the pulse animation :D will work on the spinner

[yukijoou]

Added a first draft for SVG loading indicators. More info in the commit!

Is it fine to load the SVG from the CSS? I did it this way because it seemed simpler and shouldn't break any existing code, but maybe it should be done as a reusable template/component…
Also, these images should be themed to more closely match the older spinner!

If bigger changes are needed, I'll let someone more familiar with the codebase take over. I can't really do any major refactor as this is my first PR and I don't know the codebase well yet, if at all. As far as I'm concerned, in its current state, this PR solves the motion issue, though the latest commit likely introduces other issues.

I'll write a better commit message for the second commit before this gets merged, or is it better if I squash the two commits?

Thanks for your help!

[silverwind]

I think maybe this PR should focus only on the loading icon replacement and we defer the animation removal to later. I want to try removing the transitions module soon, and if I succeed, it will be much cleaner than these style overrides.

[yukijoou]

I'm not really interested on working on this further if the main focus isn't reduced motion support… I mostly wanted to do something about that year-old issue, and don't have much interest on doing anything else. I've spent a lot more time on this than I wanted to, and don't really want to do any more work. Feel free to cherrypick and merge my spinners commit if you want to, I'll leave this PR as a draft if someone else wants to pick back up where I left off

[silverwind]

Maybe we should close then, I can not really accept these CSS hacks for the animation removal. I think we are clear we don't want these animations, even when the user has the reduced motion preference disabled. As I said, I will investigate separately what it takes to remove the Fomantic module, which is imho the proper solution.

As for the spinner, I imagine it will be a tricky endevour because it will likely need some size adjustments based on location in use.

[silverwind]

Transition module removal in #26469.

[wxiaoguang]

#26469 has been merged

[silverwind]

The spinner replacement is still valuable here, need to check if it works.

[wxiaoguang]

The Fomantic loader (spinner) has been removed by #26670

If I understand correctly, (this PR) it's willing to use SVG spinner instead of CSS spinner in the future?

[silverwind]

SVG spinners would be ideal yes, because these can be swapped easily to static SVGs for prefers-reduced-motion, unlike the current border-based spinners.

[silverwind]

I think we can close this as I assume the original author may have lost interest. We can re-open anytime of course.