Add visual feedback when clicking translate #423

ilja · 2024-10-14T12:50:10Z

ilja commented

2024-10-14 12:50:10 +00:00

In a status, we can choose to translate the status (assuming there's a translator enabled on the backend).

It will translate, in practice generally according to detected language, and also provide an option to override the source language.

Translating can take a while, and there wasn't really a visual feedback when it was translating.

Now the translate button will be dissabled while translating.

While translating (button is disabled):

When not translating (button is not disabled):

In a status, we can choose to translate the status (assuming there's a translator enabled on the backend). It will translate, in practice generally according to detected language, and also provide an option to override the source language. Translating can take a while, and there wasn't really a visual feedback when it was translating. Now the translate button will be dissabled while translating. --- While translating (button is disabled): ![image](/attachments/c12fb334-e32a-41f2-be43-20f41761b5a7) When not translating (button is not disabled): ![image](/attachments/edf3989d-361c-43b0-9fac-0184963fada3)

image.png

5.4 KiB

image.png

5.6 KiB

Oneric reviewed 2024-10-14 18:28:44 +00:00

src/components/status_body/status_body.js Outdated

					
				@ -139,0 +139,4 @@

				      this.translating = true

				      this.$store.dispatch(

				        'translateStatus', { id: this.status.id, language: translateTo, from: this.translateFrom }

				      ).then(() => { this.translating = false })

Oneric commented

2024-10-14 18:28:44 +00:00

If my limited JS knowledge doesn’t let me down here, this will lead to translating getting stuck at true if an error occurs during the dispatch promise. Replacing .then(...) with .finally(...) avoids this, or you may want to add a separate branch for errors to also visually indicate the failure

If my limited JS knowledge doesn’t let me down here, this will lead to `translating` getting stuck at `true` if an error occurs during the dispatch promise. Replacing `.then(...)` with `.finally(...)` avoids this, or you may want to add a separate branch for errors to also visually indicate the failure

❤️ 1

floatingghost commented

2024-10-26 03:42:04 +00:00

yep you're correct - .then isnt' called if the previous branch errors

yep you're correct - `.then` isnt' called if the previous branch errors

❤️ 1

ilja commented

2024-12-01 13:05:59 +00:00

is fixed now, thk you!

ilja marked this conversation as resolved

ilja force-pushed provide_visual_feedback_when_clicking_translate_button from 4339f32448 to 9838545904

2024-12-01 13:05:29 +00:00