Fast Like Button

[foliodc]

What is the best method to update user likes/saves in the frontend and backend (xano)? I’d like the button to be very responsive and load quickly. Do I have to reload the full list of likes every time there is an update and check if each id is in the list, or is there a way to update individual items as they change?

I’m curious which method @Damien used for the showcase movie app: https://twitter.com/weweb_io/status/1570799203697426437

That update speed is ok, but it does take a while to load every time you switch to the home page.

I can load the user’s like details with the item using an addon in xano. I would like to immediately update the icon on click, send the update to the backend, and change it back only if there is an error. Is it possible to change the details of the current item in an array in a workflow?

In this post from a while ago, weweb team helped with a workaround for static collection items:

Save Button with Static Collection

I am trying to add a save button to items in a collection list. Ideally, the collection would be static for SEO. Is there a good way to fetch an authenticated user’s saved items from Xano and change the icon on the static collection list item if they have already saved each item? I have this working with Xano and a dynamic collection list. Would it be better to load the collection list dynamically first to include the user saved info, then link to the static collection page somehow? Weweb Site…

@flo suggested loading a list of all likes and checking if the item id is in that list. I’m not sure how well this works when the list is very long and you have to reload and check all items every time there is a like. This also shows an error when the saves list is empty because the (contains) function requires a list with items. Is this the best way when working with dynamic lists?

[kyanaloe]

I’m not sure if this is the best way to do it, but I both send the info to the backend AND add to a frontend array when liking. The frontend array provides the immediate feedback - if id is in array, show like button pressed. The next time the list is loaded, it will also show the correct info, because I sent the like to the backend too

[kyanaloe]

result: Loom | Free Screen & Video Recording Software | Loom

[dorilama]

@foliodc

would like to immediately update the icon on click, send the update to the backend, and change it back only if there is an error.

One very basic way can be doing exactly what you are saying:

• on page load fetch user likes and save it in a variable
• bind the icon to show the like checking if the item is in the list of likes
• on icon click add the item to the variable, the icon will immediately react
• send the request to the backend to update the like
• on error remove the item from the variable

Now you need to be careful that you have a local state and a state in the backend that may go out of sync. Fetch again the likes and update the variable to be sure it’s fresh.

[dorilama]

I missed your reply while I was writing.
I agree with you