fix(calendar-web): improve rendering logic with a loading component

Author: samuelreichert

packages/pluggableWidgets/calendar-web/src/Calendar.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useMemo } from "react";
+import { Fragment, ReactElement, useMemo } from "react";
 import classNames from "classnames";
 import { CalendarContainerProps } from "../typings/CalendarProps";
 import { CalendarPropsBuilder } from "./helpers/CalendarPropsBuilder";
@@ -8,7 +8,7 @@ import "./ui/Calendar.scss";
 import { useCalendarEvents } from "./helpers/useCalendarEvents";
 import { useLocalizer } from "./helpers/useLocalizer";
 
-export default function MxCalendar(props: CalendarContainerProps): ReactElement | null {
+export default function MxCalendar(props: CalendarContainerProps): ReactElement {
     // useMemo with empty dependency array is used
     // because style and calendar controller needs to be created only once
     // and not on every re-render
@@ -27,13 +27,15 @@ export default function MxCalendar(props: CalendarContainerProps): ReactElement
 
     const calendarEvents = useCalendarEvents(props);
 
-    if (props.startDateAttribute && props.startDateAttribute.status !== "available") {
-        return null;
-    }
-
     return (
-        <div className={classNames("widget-calendar", props.class)} style={wrapperStyle}>
-            <DnDCalendar {...calendarProps} {...calendarEvents} />
-        </div>
+        <Fragment>
+            {props.startDateAttribute && props.startDateAttribute.status !== "available" ? (
+                <div className="mx-progress"></div>
+            ) : (
+                <div className={classNames("widget-calendar", props.class)} style={wrapperStyle}>
+                    <DnDCalendar {...calendarProps} {...calendarEvents} />
+                </div>
+            )}
+        </Fragment>
     );
 }

packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts

@@ -79,7 +79,6 @@ export interface CalendarContainerProps {
     startAttribute?: ListAttributeValue<Date>;
     endAttribute?: ListAttributeValue<Date>;
     eventColor?: ListAttributeValue<string>;
-    startDateAttribute?: EditableValue<Date>;
     editable: DynamicValue<boolean>;
     view: ViewEnum;
     defaultViewStandard: DefaultViewStandardEnum;
@@ -92,6 +91,7 @@ export interface CalendarContainerProps {
     showAllEvents: boolean;
     step: number;
     timeslots: number;
+    startDateAttribute?: EditableValue<Date>;
     toolbarItems: ToolbarItemsType[];
     customViewShowMonday: boolean;
     customViewShowTuesday: boolean;
@@ -134,7 +134,6 @@ export interface CalendarPreviewProps {
     startAttribute: string;
     endAttribute: string;
     eventColor: string;
-    startDateAttribute: string;
     editable: string;
     view: ViewEnum;
     defaultViewStandard: DefaultViewStandardEnum;
@@ -147,6 +146,7 @@ export interface CalendarPreviewProps {
     showAllEvents: boolean;
     step: number | null;
     timeslots: number | null;
+    startDateAttribute: string;
     toolbarItems: ToolbarItemsPreviewType[];
     customViewShowMonday: boolean;
     customViewShowTuesday: boolean;