From b43e9be60478193109bcbe936e7cfe2cc992543b Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Fri, 25 Dec 2020 00:22:27 +0100
Subject: [PATCH] show spinner when loading booked days

---
 components/calendar.tsx | 70 ++++++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/components/calendar.tsx b/components/calendar.tsx
index 78ab9f8..4c914eb 100644
--- a/components/calendar.tsx
+++ b/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,43 +94,48 @@ export default function PlainCalendar({
   return (
     <div className={className}>
       <h2 className="text-xl">Belegungsplan</h2>
-      <Calendar
-        activeStartDate={startDate}
-        minDate={new Date()}
-        // @ts-ignore
-        onClickDay={(date: Date, event: React.MouseEvent<HTMLInputElement>) => {
-          if (!onChange) {
-            return
-          }
+      <Loading loading={daysBookedLoading}>
+        <Calendar
+          activeStartDate={startDate}
+          minDate={new Date()}
+          // @ts-ignore
+          onClickDay={(
+            date: Date,
+            event: React.MouseEvent<HTMLInputElement>
+          ) => {
+            if (!onChange) {
+              return
+            }
 
-          event.preventDefault()
-          event.stopPropagation()
+            event.preventDefault()
+            event.stopPropagation()
 
-          const targetClassList = event.currentTarget.classList
+            const targetClassList = event.currentTarget.classList
 
-          if (
-            targetClassList.contains('react-calendar__tile--past') ||
-            targetClassList.contains('react-calendar__tile--booked') ||
-            targetClassList.contains('react-calendar__tile--unselectable')
-          ) {
-            return
-          }
+            if (
+              targetClassList.contains('react-calendar__tile--past') ||
+              targetClassList.contains('react-calendar__tile--booked') ||
+              targetClassList.contains('react-calendar__tile--unselectable')
+            ) {
+              return
+            }
 
-          if (!startDate || !!endDate) {
-            onChange({ startDate: dateFormatBackend(date), endDate: null })
-            return
-          }
+            if (!startDate || !!endDate) {
+              onChange({ startDate: dateFormatBackend(date), endDate: null })
+              return
+            }
 
-          // when startDate set, but end missing
-          if (isAfter(date, startDate)) {
-            onChange({ endDate: dateFormatBackend(date) })
-          } else {
-            onChange({ startDate: dateFormatBackend(date), endDate: start })
-          }
-        }}
-        tileClassName={tileClassName}
-        value={null}
-      />
+            // when startDate set, but end missing
+            if (isAfter(date, startDate)) {
+              onChange({ endDate: dateFormatBackend(date) })
+            } else {
+              onChange({ startDate: dateFormatBackend(date), endDate: start })
+            }
+          }}
+          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>