show spinner when loading booked days

components/calendar.tsx

@@ -11,6 +11,7 @@ import Calendar from 'react-calendar'
 import useBookedDays from '../helpers/useDaysBooked'
 import { dateFormatBackend } from '../helpers/date'
 import { getNextBigger, getNextSmaller } from '../helpers/array'
+import Loading from './loading'
 
 export default function PlainCalendar({
   start,
@@ -93,11 +94,15 @@ export default function PlainCalendar({
   return (
     <div className={className}>
       <h2 className="text-xl">Belegungsplan</h2>
+      <Loading loading={daysBookedLoading}>
         <Calendar
           activeStartDate={startDate}
           minDate={new Date()}
           // @ts-ignore
-        onClickDay={(date: Date, event: React.MouseEvent<HTMLInputElement>) => {
+          onClickDay={(
+            date: Date,
+            event: React.MouseEvent<HTMLInputElement>
+          ) => {
             if (!onChange) {
               return
             }
@@ -130,6 +135,7 @@ export default function PlainCalendar({
           tileClassName={tileClassName}
           value={null}
         />
+      </Loading>
       <div className="mt-3 flex justify-center">
         <div>
           <div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>