Store a lot of data from db to ... array (a custom state ...)?

Hi all,

I want to create an app that shows a year calendar using a repeating group. One cell for each day (31 days * 12 month’s / columns/rows). No problem so far and it looks pretty nice :wink:

The challenge:
Each single day has different “events”, like specific regional holiday(s) and/or other day specific info’s like “next fullmoon”.
This data is currently represented in a database table:

As you can see, there’s a lot of data (text, lists…) for a single day.
As mentioned, I’m currently using a repeating group to present the whole year calendar. I placed a (text) item in every cell (fixed width+height) for each day and I used the conditions to “handle” the day: On weekend days - yellow background color, … or … IF (do a search in DB…) current day has some special flag (like holiday-day) - then paint a double magenta line that day …:

Everything works fine, but there’s a heavy database traffic (workload) because every single day will check, wether there’s a specific thing for that cell’s day in the db and apply the expression (12*31).

Is there (maybe) a possibility to do something like an “app initialising…” screen on start and store that all the db infos in an array / custom state?
It would be nice if there’s a solution to store a (complete) set of records in the “memory”, so that every data manipulation by the user (read/write/update) is done in the “cache” (no db-access needed, maybe (hopefully) saving workload units).
Yeah!.. oldschool like…: a “save”-button" where the changes stored in the “cache” are written back to the db.

Many thanks for your ideas!
Best,
jupxi

Wrote a lot of text but I think I solved it:

Here’s a step-by-step strategy to optimize your Bubble app based on your description:

1. Load Data on Initialization

  1. Create a Custom State for Storing Data:
  • On the page where your calendar is displayed, add a new custom state. This state will store the array of events. You might call it CalendarEvents and set its type to be a list of the data type that holds your events (e.g., Event).
  1. Fetch and Store Data on Page Load:
  • Use a workflow that triggers on page load to fetch all event data from the database and store it in the CalendarEvents custom state. This should be a single action that retrieves all necessary data based on your needs (e.g., all events for the year).

Make sure to include missing constraints. AI doesn’t know enough about bubble to give full details, but you want to add constraints to the search that loads all data so it only shows for the selected year. Also you’ll likely want to change the UI/UX to restrict to one month at most. In my years of experience building custom calendars in bubble, it’s the year view that will be too slow to load.

  • Are custom states stored in the user’s browser?
  • It it possible to manipulate that data (client side)?
  • Is there a limitation on storing data in custom stated? (performance, max.count…?)
  • Do custom states also consume workload units?

thanks + best
jupxi