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

ilja added 1 commit 2024-10-14 12:50:10 +00:00

Add visual feedback when clicking translate

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

4339f32448

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.

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

src/components/status_body/status_body.js

					
				@ -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

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