I am using the tileContent function of react-calendar to add a price to each day on the calendar. Before the prices are fetched from the server, I want to display a loader in each calendar tile.

I am considering two approaches:

1.-Pass an array of days to the calendar, with each day initially containing a loader component as its content. Once the prices are ready, I would update the content of each day to display the price instead of the loader.

2.-Manage the loading state inside the react-calendar component using CSS classes. Initially, I would apply a class that displays a CSS-based loader in each tile. Once the prices are ready, I would remove the loading class and update the tile content to display the prices.

Advice on the optimal approach or alternative methods to implement this would be valuable. Examples or resource suggestions are welcome. My current approach is the option 1, to pass an array of objects to the MyCalendar component. Each object contains a date and the content to be displayed on that date

function MyCalendar({ data }) {
  // Create a map for easier access
  const contentMap = data.reduce((acc, { date, nodeContent }) => {
    acc[date] = nodeContent;
    return acc;
  }, {});

  return (
    <Calendar
      tileContent={({ date, view }) => {
        const dateString = date.toISOString().split('T')[0];
        if (contentMap[dateString]) {
          return contentMap[dateString];
        }
      }}
    />
  );
}