Placeholder for the CalenderList component

src/calendar-list/index.tsx

@@ -38,6 +38,8 @@ export interface CalendarListProps extends CalendarProps, Omit<FlatListProps<any
   showScrollIndicator?: boolean;
   /** Whether to animate the auto month scroll */
   animateScroll?: boolean;
+  /** Placeholder rendered when the month is loading. */
+  renderPlaceholder?: (year?: number, month?: number) => JSX.Element;
 }
 
 export interface CalendarListImperativeMethods {
@@ -80,6 +82,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
     animateScroll = false,
     showScrollIndicator = false,
     staticHeader,
+    renderPlaceholder,
     /** View props */
     testID,
     style: propsStyle,
@@ -240,6 +243,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
         calendarHeight={calendarHeight}
         scrollToMonth={scrollToMonth}
         visible={isDateInRange(item)}
+        renderPlaceholder={renderPlaceholder}
       />
     );
   }, [horizontal, calendarStyle, calendarWidth, testID, getMarkedDatesForItem, isDateInRange, calendarProps]);

src/calendar-list/item.tsx

@@ -1,6 +1,6 @@
 import XDate from 'xdate';
 import React, {useRef, useMemo, useCallback} from 'react';
-import {Text} from 'react-native';
+import {Text, View} from 'react-native';
 import {Theme} from '../types';
 import {toMarkingFormat} from '../interface';
 import {extractCalendarProps} from '../componentUpdater';
@@ -15,6 +15,7 @@ export type CalendarListItemProps = CalendarProps & {
   theme?: Theme;
   scrollToMonth?: (date: XDate) => void;
   visible?: boolean;
+  renderPlaceholder?: (year?: number, month?: number) => JSX.Element;
 };
 
 const CalendarListItem = React.memo((props: CalendarListItemProps) => {  
@@ -29,7 +30,8 @@ const CalendarListItem = React.memo((props: CalendarListItemProps) => {
     headerStyle,
     onPressArrowLeft,
     onPressArrowRight,
-    visible
+    visible,
+    renderPlaceholder
   } = props;
 
   const style = useRef(styleConstructor(theme));
@@ -82,6 +84,11 @@ const CalendarListItem = React.memo((props: CalendarListItemProps) => {
   }, [onPressArrowRight, scrollToMonth]);
 
   if (!visible) {
+    if (renderPlaceholder) {
+      const year = item.getFullYear();
+      const month = item.getMonth();
+      return <View style={calendarStyle}>{renderPlaceholder(year, month)}</View>;
+    }
     return (
       <Text style={textStyle}>{dateString}</Text>
     );