stable-diffusion-webui disable gradio css transitions

gradio components by default go through css transition on every update. typically this is short and invisible, but if component update takes more than 50ms, then visible flickering becomes apparent. (this is most commonly visible on large text boxes as smaller components are hardly noticeable)

this also wastes gpu resources up to a point where there are many stories how disabling hw acceleration in browser increases generation performance.

there is no upside of having css transition on component update, so this component simply disables it. note that this has no effect on manually handled transitions such as progress bars.

Mar 15 '23 14:03 vladmandic

In my opinion, as a user, this is not the best solution to this. Model loads often take more than a few seconds, sometimes several minutes on a HDD, and not displaying progress in the UI for those is bad UX. The flickering you describe should be fixed in https://github.com/gradio-app/gradio/pull/3353 and further improved once https://github.com/gradio-app/gradio/issues/3443 is closed. The former has been implemented in https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/8752.

I would assume something similar could be done to handle textbox updates, if not then it should be handled upstream.

Mar 20 '23 09:03 catboxanon

Any long running operation should trigger a progress bar (and yes, that should apply to model load as well). Relying on predefined CSS animation does not indicate actual progress.

Mar 20 '23 11:03 vladmandic

Just an FYI, Gradio supports actual progress bars with a gr.Progress element in the function parameters, that can be controlled on the backend. Worth revisiting when the new Gradio version is merged

Mar 23 '23 02:03 space-nuko

very nice to see those go

Mar 25 '23 08:03 AUTOMATIC1111

I must have mistunderstood it because it really does remove all loading indicators.

Removing css transitions and animated loading svg indicator would be a yes, but disabling any loading indication at all for everything is not what I want to have.

Mar 27 '23 05:03 AUTOMATIC1111

no worries.

fyi, for anyone - any component that uses .change or .click can specify show_progress = False in the event definition. so if a button click triggers some flicker or unnecessary animations while it does its job, it can be disabled with something like button.click(show_progress=False)

Mar 27 '23 16:03 vladmandic

Reverting this seems to have caused an eternal setting loading bug.

https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/9055

Mar 27 '23 19:03 MrKuenning

Reverting this seems to have caused an eternal setting loading bug.

#9055

I don't think this is the cause. I tested with and without this PR's change with no user.css modifications and I'm not experiencing the loading bug.

Mar 27 '23 19:03 catboxanon