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 })

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