Loading large number of icons/avatars dynamically?

Currently building the UI for an app, and want users to be able to select from ~500 custom icons for their buttons. Does anyone have any recommendations for how to do this in an efficient way? I plan to use this same solution for allowing users to select an avatar within the app as well, so I want to get this right! :smile:

Should I:

  1. Create a database table assigning an “iconNumber” value to each icon, then dynamically load the icon from the database based on a thing’s “iconNumber” ?
    ^ I feel like this solution is the most efficient for managing a large number of icons/avatars, but has the potential to make client side rendering slow. I’m also envisioning a ton of unnecessary calls to the database just to load UI elements.

  2. Change the image source of the image element using conditional formatting, and adding 500+ conditions?
    ^ Intuitively this feels like the wrong approach, but also feels like it would load the icons faster and reduce the number of calls to the database.

  3. Use an option set to pair iconNumbers with images? Is this the holy grail? Do option sets load with the page and act as a “cached” database for this purpose? I don’t actually know, so I appreciate any comments from someone experienced on this!

  4. Is there a hybrid approach I can’t think of that would both reduce the number of calls to the database, but also make managing a large number of icons/avatars easier?

Basic UI Concept for reference:

Thank you for your time and help! :slight_smile:

1 Like

Unless I get a response with a better solution, I found this in the Bubble documentation that has led me to believe that option sets are the best option (ha) for this solution:

Options vs. custom types

It’s technically possible to get many of the benefits of option sets using normal custom data types. You should consider option sets instead for a few reasons:

  • Options are faster to access, as they require no database reads.

  • Option sets are easily extensible to add new options and change existing ones. Renaming an option will propagate throughout your app.

  • Options sets are easier to use. They can be accessed from anywhere in your app, and are a lot easier to access than doing a search.

However, there are a couple of downsides compared to custom types:

  • There are no privacy settings for options. So, do not put sensitive data as an option’s display or one of its attributes.

  • To add new options or change existing ones, you must push a new version of an app, unlike regular data which you can add while your app is live.


This topic was automatically closed after 70 days. New replies are no longer allowed.