Need help with front-end design for optimal performance

I’d love if someone could help me identify the most performant way of tackling a problem I’m facing…

  • I have a repeating group that can be any number of items long. Let’s say that it’s in the neighborhood of 5 on the low end, typically around 20-25, and 100+ on the extreme end.
  • Each item in the repeating group can be one of 5 different types of things (for sake of this example call them A, B, C, D, or E but in the real world I have 15 different “thing” types), each with a completely different FE design, database fields they reference, etc. The user can select which type each one is, insert new ones in the list at any point, delete them, etc.

Here’s a small example - let’s say the repeating group is 5 elements long:

  • A
  • C
  • B
  • A
  • D

The user opt to delete C, so the 2nd RG item becomes B, the 3rd becomes A, and the 4th becomes D. They could then insert a new D at cell 1 so that everything else is shifted downward.

The only way I can think to structure my FE design is to have every single cell have the ability to be either A, B, C, D, or E and conditionally hide all but 1 based on the type that each cell is. If I do this, however, does it mean that Bubble is going to load 4 unneeded types for each cell (ex. - if a cell is A it’d load B, C, D, and E unnecessarily), so on the extreme end of 100 cells it’d be loading 400 unneeded things? This seems like it’d end up very slow for long lists as it’d be loading a ton of unnecessary HTML + performing a lot of re-calculations on changes to cells as outlined above.

Is there a better way?

How do you intend to display 5 different datatypes in 1 repeating group?

If by this you mean 5 different datatypes, then that’s not realistic. Technically, it’s possible by converting everything to text but doesn’t really make sense. If you absolutely need to show these different datatypes in an RG then you can explore making a satellite datatype or restructuring your db depending on how far along you are.

I should have been more clear - it’s not 3 different data types. It’s one data type called “Component”, which has a field called “Type” that specifies what it is (ex. - it could be a Paragraph, Image, Video, Quote Block, etc. - each of which is obviously displayed very differently to the user) as well as a field called “UID” that allows me to look up more information about that particular component.

For example, one cell of the RG may be of type “Paragraph”. I’ll then take the UID and look up that component in another datatype called “Paragraphs” where it’ll give me the text, font size, font color, etc. The next cell of the RG may be of type “Video”. I’ll then take that UID (unique to the cell and different from the first UID) and look it up in another datatype called “Videos” where it’ll give me the URL, sub-caption, size to display the video, etc. Any cell can be a Paragraph, a Video, or any number of other parts of a document (image, quote block, table, divider, etc).

Ok got it. So basically you have an RG where each cell needs to display different UI based on the type. It’s fine to have different blocks of UI in a cell. Just make them all hidden by default and set a condition to to make each UI block visible based on the cell’s type