Seamless chat - realtime, supabase, infinite loading, scroll to bottom, etc.

Best Practices

I've been trying to build a cliched social app with a group chat feature for a while now. Originally I came from Firebase whose queries have infinite loading in FF but Supabase does not.

So I implemented it with an API call which does the trick well enough.

The main issues start when I enable realtime. I have an action that is executed everytime a new row is inserted into the supabase table. This action refreshes the API call to get the most recent rows in the table and it works but also has a loading time of ~1.5 seconds which is not much but is long enough to be jarring. Now I can optimize it a bit by setting the DB hosting location but Before I resort to this by getting a paid sub in Supabase, I want to try alternative methods to optimize it.

Scroll to bottom does not work in this case but it did 8 months ago with native Firebase queries.

Another option I thought of was inserting or modifying an app state and dynamically generating chat elements from that app state, although I might be mistaken with this approach.

Has anyone solved this issue? I will also settle for ideas that you might have that I could try.

What ever the outcome is, I'll post it here as a guide for everyone else.

3
5 replies