Improving User Experience While Waiting for Word Correction in Kodular

Hi everyone,
I’m building an app that corrects words. The user types a word and presses a button, then the correction appears. The problem is that sometimes the correction search takes a little time, and the user doesn’t see any indicator that the app is working.

I was thinking of something like this:

Show a static image or background with two messages in sequence:

  1. “Loading…”

  2. “Almost done…”

Then, the corrected word appears immediately.

My question for the Kodular community: How can I implement this easily using blocks so that:

The messages appear sequentially while the correction is being processed.

The app doesn’t freeze or get stuck.

Any suggestions or example blocks would be really helpful.

From where you’re getting correction? can you show screenshot exactly what you want?

This could be achieved by using clock & variable blocks/component.

Please write more clearly exctly what you want, if possible show your current progress (Blocks) what exactly you’re making.

1 Like

Hi, thanks for your question! Let me clarify exactly what I want to do:

  1. I have a CSV file with three columns:

Column 1: Original word

Column 2: Corrected word

Column 3: Explanation

  1. The user types a word in a TextBox and presses a Button.

  2. Here’s the logic I want:

If the typed word exists in Column 1:

Show the corresponding word from Column 2.

If Column 3 is not empty, also show Column 3.

If the word does not exist in Column 1:

Find the closest match from Column 1 using similarity percentages.

Show the suggestion with the highest similarity first.

If no close match, show the lowest similarity suggestion.

If no match at all, show “Word not found”.

  1. Problem I face: Searching through the CSV can take some time, so I want to show a loading indicator while the app is searching:

Display messages sequentially:

  1. “Loading…”

  2. “Almost done…”

Then, show the result based on the logic above.

I’m trying to implement this using blocks, Clock, and variables, but I’m not sure how to organize it efficiently.


new1.aia (35.0 KB)

get help from this, this might help you.

1 Like

Thank you for your help.
I tried that, but it didn’t work. The Kodular website shows two errors related to the SubmitBtn. This might be because I created a large block for the same button—the one I sent you before, which contains the execution commands—and the other block you suggested to add.
Should these two blocks be merged together? And what should the order be?

Hi Noor,

I think I managed to solve the problem :partying_face:

Since the app freezes as soon as the function is executed and stays frozen until it finishes, I created a timer to process the data every so often, in this case every 1 ms.
Doing it this way, however, required at least 700 ms (one millisecond for each item in the list), so I added another counter that processes 5 items every tick of the Clock.
This makes it possible to have a loading screen that updates as the elements are being processed (before, during the freeze, even if you changed the text of a label it would wait for the control procedure to finish).

Right now I set it up so that it starts with the text “Loading…” and when it gets halfway through the list it shows “Almost done…”.

It’s a bit more complex than before, but as always, if you have any questions just let me know.

NoorProjectFix.aia (12.1 KB)

2 Likes

I honestly don’t know how to thank you — you’ve helped me so much.
I truly appreciate it, and thank you again for your support.

I followed your advice, but in my version, on screen number one, I show a Lottie animation for a few seconds as a splash screen. Because of that, I couldn’t place the block shown in the picture anywhere. I tried using it with all the blocks, but it kept giving me an error. Do you have any suggestions to solve this issue?

The second problem I’m facing is the counter that appears at the bottom while searching for the word. Is there any way to hide it so the app looks nicer?

And honestly, you’ve helped me a lot by creating all these blocks in Kodular for me — if there’s any way I can thank you more, please let me know.

  • Put the Lottie inside a Vertical Arrangement called VA_SPLASHSCREEN and add it to the list in setLayout

  • In Screen.Initialize, add setLayout(VA_SPLASHSCREEN)

  • As soon as the animation ends, call setLayout(Vertical_Arrangement2p2)

Remove the Snackbar in Clock2.timer

For me it is a pleasure to help those in need, and your happiness is my reward :heart_hands:

1 Like

I couldn’t understand what you meant. I’m already placing the Lottie inside Vertical Arrangement 1p1.

Try it like this, (which is even better)
at least when you call setLayout(VA_SPLASHSCREEN) the timer is activated automatically and you don’t even need to enable it manually.

1 Like

Why isn’t the Lottie URL present, and where am I supposed to put it? The Lottie URL is the link to the animated illustration I want to display. And in the new codes, when I try to search for words that are already in the CSV, they don’t show up even though they’re actually there — it keeps saying they’re not found. Thank you in advance.

Put the Lottie inside VA_SPLASHSCREEN (there is no need to use Lottie.StartAnimation), and sorry, I forgot to add it in Screen.Initialize.


since I already made the changes and it costs me nothing to send it to you here the updated version with the changes, but I didn’t touch the procedure that checks the words and it works correctly for me. :confused:
NoorProjectFinal.aia (12.8 KB)

1 Like

Thank you so much — I really appreciate your help; you’ve helped me a lot.
Now there’s another issue: when I add a list, no matter how many words it contains, some words don’t appear in the search results even though they actually exist. I have no idea where the problem is coming from.
Keep in mind that I changed “فارغ” and removed it because I made the whole list empty without adding the word “فارغ”, and everything was working perfectly with the previous codes you created for me.
But now I just don’t know what’s causing the problem.
Do you have any advice?

Hi,

We had encountered problems using an empty element, which is why we added “فارغ”.

I tested it again both in Arabic and with some English words, and it works correctly for me :confused:

To help you, I would need more details about what you changed.

1 Like

Yes, I do remember that, but when you gave me the blocks that included adding the word “فارغ,” I had already reused the blocks without it, and they worked.
So I didn’t use the blocks that contained “فارغ,” and I didn’t add the word “فارغ” to my word list. I just didn’t get the chance to tell you that.

Right now, I’m using the last file you sent me, but since I never added the word “فارغ” to any of the entries in my list, I used those last blocks but removed the “compare text = فارغ” part and added “is empty” instead, as shown in the picture.

However, as I mentioned before, some words show up when I search for them while others don’t, even though they are right there along with the same group of words. I’m not sure what’s causing this issue.

My mistake,

I think that in the rush while checking the project I dragged a block outside a conditon without noticing.

Since I was at it, I also changed a small part related to the counter.


NoorProject.aia (12.2 KB)

I hope this time it works :grin:

2 Likes

Yes, it worked perfectly!
I really don’t know how to thank you enough.
Thank you so much for your help — it truly made a big difference.

Very good, I’m glad to hear that :partying_face:

For any other issue, we’re here.

Have a nice day, dear.

2 Likes

Thank you so much, I really appreciate your help.
I actually have a small issue I’m still facing.
The TextBox hint doesn’t appear when the app starts, even though Visible and Enabled are both set to true and the Text property is empty.
If you have time, I’d really appreciate your help with this as well.

Usually an empty text box should look like this
immagine
yours instead looks like this
immagine
so I think there’s something written inside it, like a space.

Try checking that.

1 Like