I was working on a LiveView page that loaded hundreds of points of data. I probably should have paginated the data load, but this is an internal tool, so that sort of thing isn’t particularly important to me for this project.
On first load, boom. 368 records from the database, filtered to exclude a number by default, mounts in under a second. I add a checkbox to reload the data, adding in all the records, phx-update=“replace”, and I get a stopwatch out. 12 seconds to reload the list, now with 435 records. That’s weird. The database returns the data in microseconds, but the update on the page prompted Firefox to advise me to stop loading scripts.
I fire up the profiler, but don’t get very far with that – the data is inconclusive. So I decide to start reducing the test case. A straight inspect of the individual maps with no markup at all update instantaneously. Ok. I start adding back plain divs. Lightning. I start thinking that it may be related to javascript mounting phx-hooks on each of the component divs. I conservatively add a hook back to the component expecting it to break. Nope. Blink and you miss it.
I add my fontawesome icons back to the buttons on the div. Bingo. Very slow. I add all three icons to the component. Very very very slow. I remove them again, and I can say I solved where the problem was. My guess is that the way fontawesome loads in from the hosted kit apparently doesn’t have a “complete” signal until every single icon is loaded, and I imagine that morphdom is simply doing as it’s told, waiting to present the data until it knows it’s loaded.
Easy fix. I’ll use text instead of icons. No biggie. Though, I notice the core components shipping with the latest Phoenix supplies us with tailwind’s hero icons. Why not give those a shot? They’re included in Phoenix, so it’s likely there’s not this bonkers slow loading behavior.
And there’s not. The hero icons load near instantly.
I’m just leaving this short adventure in troubleshooting LiveView load times here in case any other hapless developers trip on their own shoelaces like I have.
