Food app - recipe search (API call) is super slow

Some of you might know that I’ve built this app for the “What should we have for dinner?”-problem (app is at https://food.aitenhealth.com)
One feedback I got was that it’s quite slow when searching for recipes.
So I thought I’d try to do something about it, but I’ve yet to find some way of making things speedier.

I connect to an external API with API Connector and I’ve connected the results of that call to a repeating group and one of the parameters of the API call to my input field (see picture)
So every time I write something in that field I get new results back from the API (20 hits, so not much)

All good apart from the fact that when I write something it takes ages for it update with the new results.
I have run it through postman and direct URL in the browser and those results are lightning fast so there must be something wrong with my setup in Bubble.

Does someone know what I should be doing differently and if so what?

Thanks!

I would try to use the api as action on button click, instead of data source.

So you could have a search button beside the input, send the api request on click and fill the repeating group with the answer from it.

Are those kinds of API calls faster?

The call itself might not be faster, but I assume part of why it seems slow is not because of the api call itself. E.g. it takes a moment until Bubble realizes that the input has changed. So that’s why I would give it a try at least.

That was a hypothesis of mine as well, that the change in input didn’t get registered until some time had passed.

I’m in the process of modifying the call to happen as part of a workflow instead.
Keeping the API call as “Data” for now but updating the RG in two steps:

  1. Click Search button (event runs)
    2a. Element action - RG Clear List
    2b. Element action - RD Display List (with API call as source)

Tested with this approach a couple of times now but no significant improvement.

Tried to call the API it with the “Use as: Action” with a completely fresh application.
It went straight to hell with that one - the API call now took ~50 seconds to complete.

One thing I found that speeded things up was to reduce the number of fields Bubble fetches in the call.
By using “Ignore Field” and doing that on all the fields I don’t yet utilize in my app I cut the API call cycle time from ~5-6 seconds before to ~3-4 seconds after.

To help the user feel that things are hapening I also hide the RG before I run the API call.
No difference in actual performance because of it.
Perceived performance is slightly better because you see it disappearing. Add a spinner of some kind and it should feel even better.

This topic was automatically closed after 70 days. New replies are no longer allowed.