Need help with data heavy, complex page!

Ask us anything
1

Hi all!

I have a strategic planning and goals tracking platform for my bsiness consulting clients that I made in bubble. I was remaking it from the ground up to make it more performant, and ended up creating a custom component with a personal plugin to make it snappier.

But then I discovered weweb 10 days ago and supabase and self-hosting were a turning point for me - feels like waaay less worry about downtime.

Basically, this is the heavy part (this is already its version in weweb):
Video of current weweb project (45s): https://youtu.be/crWIwmbZkaI
Video of current bubble project (the remake) (45s): https://youtu.be/ACM0TxITc6M
(had to blur parts of the second video because they are actual client sensitive data. This second video can be considered a “stress test” already)

Screnshot:

image
image1918Ă—947 58.3 KB

(sorry everything is in portuguese)

Basically, we have (for now…):
rows: goals
columns: people
Intersection: L for leader and P for participant

I set up three tables in supabase:

  1. goals
  2. people
  3. goals-people (this has a goal_id and a people_id)

I create this “matrix” by having a collection list of goals and, inside each, two cells

  1. for the goal name
  2. a horizontal collection list with the “people”. In each cell, if existis a goals-people where goals = this goal and people = this person, it puts the mark L or P depending on the role

Obs:

  1. I also heave “goal groups” that separate them by subject, and only filter the goals that are in the selected group.
  2. I need it to be able to handle a lot of rows and columns
  3. Sometimes, this vision is used in realtime by multiple consultants (doing strategic planning workshops), so realtime is important
  4. My current bubble app CANNOT handle too many rows+columns, it crashes. The new version I was building can!
    5) I REALLY want to make it with weweb now! With all the bubble downtime, I simply cannot pass the opportunity of using supabase and even selfhost if necessary…

For all the three supabase tables, I set them up as realtime

Any tips on making this more performant (more snappy)

edits: formating

2

Welcome to the community.

The issue is that you’re loading an Columns x Rows amount of elements, which is unsustainable without some more advanced techniques, especially if it’s even scrollable. You should implement this with a Virtual Scroller (which is a custom solution) or other like for example Google Sheets actually use a Canvas to render these elements, which in your case would be a Custom Coded Component.

1 Like
3

I managed to solve it!

I used an HTML element to dynamically create the grid. Works really well now :smiley: