Lazy loading for a timeline calendar grid

[denisorehovsky]

Hi. I have a timeline calendar grid with data on the x and y-axis. Currently, the prototype looks like this:

The y-axis lists rental properties. There is not a lot of data on this axis (usually between 1-100 per account).

However, the x-axis has a lot of data because we display days on this axis. Nov 12, 2023, Sep 10, 2023, etc.

The calendar could show the timeline between 2020-01-01 - 2025-12-31 which is 2192 days (2192 columns). Displaying such a large amount of columns is possible with virtual scroll which is already implemented using https://tanstack.com/virtual/v3.

However, we need to lazy load data from the server in chunks. Let’s say we have 2192 columns and 100 rows. It will be 219200 cells to fill.

What we need is lazy loading for columns. For example, fetch data for 100 rows between 100-200 columns or between 1100-1200. I think that dividing data into 100 per chunk is good enough for us.

Now, how to implement it? I have problems using your infinite query. It’s not flexible enough.

1. I need to be able to randomly load a chunk depending on where the user scrolled to. It could be at the beginning of the x-axis, the middle of the x-axis, the end of the x-axis, or anywhere else.
2. I need to have multiple chunks stored at the same time. For example, if the user has these columns visible in their viewport (90-110), then I need to display data from the first and second chunks at the same time. Because the first chunk loads data between 0-100 columns and the second chunk loads data between 100-200 columns.

At least that’s the idea right now and it’s difficult to make infinite scroll work for that. Are there any ideas? Also, is it possible to implement a custom infinite scroll?