Example app issues

[nandorojo]

Hey there, just learned about Electric and wanted to try it out. Very interested in it and I appreciate it being open source. Overall seems like a great project.

I found some elements of the examples quite buggy/jittery and I think fixing these issues could help adoption. The issues are due to load times and caching which are the areas where I expected Electric to shine as a newcomer.

You may need to go frame-by-frame or watch the following videos in slow-mo to see. But I found the flickers quite jarring.

FYI – I'm sharing these 100% to try to help. Not a dig on Electric at all since I'm very interested in trying it out. I want to understand if these are easy fixes or if they represent fundamental issues I should be aware of. Happy to even help PR them or something!

Linear Example Issues

Flicker 1: issue count on initial load

ElectricSQL.Flicker.1.mp4

Flicker 2: clearing a filter

Applying a new filter is instant, but removing a filter flickers.

This should apply the filter synchronously in the next render, since that state is already cached. However, it seems to be doing a new DB lookup (I'm just assuming...) and it takes a sec after the render to actually apply the filter.

ElectricSQL.Flicker.2.mp4

Slow-mo

In case it's not clear, here is a video of me scrubbing back and forth so that you can see the 3 distinct render states, when there should only be 2 if the cache is working synchronously.

New.Discussion.electric-sql_electric.-.1.June.2024.mp4

Basic Example Issues

The basic examples are slow to load, and it depends on whether you use PGLite or SQLite, which I assume is expected. However, I'm wondering what could make the PGLite one so slow – is it the bundle size of pglite itself? Or the query time?

All of the videos here are on the same WiFi speeds. But I figured the WiFi is a wash, since the data is all cached so I'd expect it to work local-first.

Basic PGLite: Initial load is slow

Here is the PGlite example. It's incredibly slow to load – slower than basically any other website I'm using.

Slow.ElectricSQL.mp4

Basic SQLite: faster (much faster)

Web.Example.-.ElectricSQL.-.1.June.2024.mp4

Control Group: Linear

Just to contrast the above examples with the gold standard, here is the real Linear website loading on my same WiFi. It's so fast to load both the UI and data, with zero flickers.

Presumably they're also a PWA which helps with the UI shell loading instantly, so this part may be a bit unfair by comparison. For example, I can see that their sidebar loads in instantly but the badge count takes a sec.

Beatgig.All.issues.-.1.June.2024.1.mp4

[nandorojo]

The flickers from the Linear example are due to this line of code. It appears that raw SQL doesn't get cached:

electric/examples/linearlite/src/components/TopFilter.tsx

Lines 32 to 34 in c3873fe

	const totalIssuesCount: number =
	useLiveQuery(db.liveRawQuery({ sql: 'SELECT COUNT(*) FROM issue' }))
	.results?.[0]?.['COUNT(*)'] ?? 0

[KyleAMathews]

👋 we've been working the last month on a rebuild of the Electric server over at a temporary repo https://github.com/electric-sql/electric-next/

You can read more about why we made the decision at https://next.electric-sql.com/about

We're really excited about all the new possibilities the new server brings and we hope you'll check it out soon and give us your feedback.

We're now moving the temporary repo back here. As part of that migration we're closing all the old issues, PRs, and discussions. We really appreciate you taking the time to start this discussion! If it's still relevant in the new system, please reopen.