Advice on complex popups loading time

Ask us anything
1

I have a very complex popup. There are a lot of sections, data displaying, etc…

I know this causes it to take longer to load (it is taking around 2 to 3 seconds).

Are there any tips on making it load faster?

2

Hi @azuliani ,

Without knowing much specifics, I have some suggestions:

  • Easiest way to improve user experience is if you fetch data prior to displaying the popup - while displaying a loader animation on the button the user pressed to initiate this popup.
  • A popup is part of the screen, which would suggest that the amount of data that can be displayed is limited.. so perhaps you could hide sections of your popup behind tabs (and load data only when selecting those tabs). If you need a summary with key metrics, perhaps the backend can calculate that faster and ony display those on the first tab of your popup.
  • If the delay comes from your backend, perhaps a quick win can be to check if you’re utilizing indexes and avoid loops where possible.
3

I ended up going somewhere in this direction…

changed the popup to be a “fake popup” which I can show prior to loading the (heavy) data, have the heavy data be fetched from a supabase view and using indexes

Not 100% what I wanted, be the experience in much better

1 Like
4

Conditional rendering (which popups feature uses) takes a lot of time for complex layouts. WeWeb struggles with performance even without rendering complex stuff like this, I’d probably just use the display property instead, which uses CSS and not the conditional rendering.

5

Hi @Broberto ,

You’re the first to promote the display property over the conditional rendering that I’ve read. Apparently it’s not a clearcut answer to say that conditional rendering is always better. Do you understand why Weweb promotes conditional rendering (over display property) themselves? Or under what conditions the display property shines? Or is it just a case of testing case by case?

Thanks!

6

Hi @thijs,

Conditional rendering means the element isn’t in the page at all until you need it. That’s better for security, because the data doesn’t exist in the code for users who shouldn’t see it. It can, however, cost a bit more to render when you finally show it.

Using display:none keeps the element in the code but just hides it. That makes it very fast to show again (good for popups), but the data is still there in the code, so it’s not safe for sensitive info.

You can also combine both: conditionally render the popup only for users who are allowed to see it, but render it hidden (display:none). Then when the user opens it, you just switch it to visible with no extra render time.

1 Like