From d736468ab9e7b2cb9daac97e61d005c99de97925 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Sat, 5 Jun 2021 18:28:06 +1000
Subject: [PATCH] Suspend calendar import buttons

---
 .../AvailabilityEditor/AvailabilityEditor.tsx | 50 +++++++++++--------
 .../src/components/Error/errorStyle.ts        |  4 ++
 crabfit-frontend/src/components/index.ts      |  5 +-
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
index 0c836f9..b1a93d7 100644
--- a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
+++ b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, Fragment } from 'react';
+import { useState, useRef, Fragment, Suspense, lazy } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocaleUpdateStore } from 'stores';
 import dayjs from 'dayjs';
@@ -24,7 +24,11 @@ import {
 } from 'components/AvailabilityViewer/availabilityViewerStyle';
 import { Time } from './availabilityEditorStyle';
 
-import { GoogleCalendar, OutlookCalendar, Center } from 'components';
+import { _GoogleCalendar, _OutlookCalendar, Center } from 'components';
+import { Loader } from '../Loading/loadingStyle';
+
+const GoogleCalendar = lazy(() => _GoogleCalendar());
+const OutlookCalendar = lazy(() => _OutlookCalendar());
 
 dayjs.extend(localeData);
 dayjs.extend(customParseFormat);
@@ -68,26 +72,28 @@ const AvailabilityEditor = ({
       {isSpecificDates && (
         <StyledMain>
           <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
-            <GoogleCalendar
-              timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
-              timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
-              timeZone={timezone}
-              onImport={busyArray => onChange(
-                times.filter(time => !busyArray.some(busy =>
-                  dayjs(time, 'HHmm-DDMMYYYY').isBetween(busy.start, busy.end, null, '[)')
-                ))
-              )}
-            />
-            <OutlookCalendar
-              timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
-              timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
-              timeZone={timezone}
-              onImport={busyArray => onChange(
-                times.filter(time => !busyArray.some(busy =>
-                  dayjs(time, 'HHmm-DDMMYYYY').isBetween(dayjs.tz(busy.start.dateTime, busy.start.timeZone), dayjs.tz(busy.end.dateTime, busy.end.timeZone), null, '[)')
-                ))
-              )}
-            />
+            <Suspense fallback={<Loader />}>
+              <GoogleCalendar
+                timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
+                timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
+                timeZone={timezone}
+                onImport={busyArray => onChange(
+                  times.filter(time => !busyArray.some(busy =>
+                    dayjs(time, 'HHmm-DDMMYYYY').isBetween(busy.start, busy.end, null, '[)')
+                  ))
+                )}
+              />
+              <OutlookCalendar
+                timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
+                timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
+                timeZone={timezone}
+                onImport={busyArray => onChange(
+                  times.filter(time => !busyArray.some(busy =>
+                    dayjs(time, 'HHmm-DDMMYYYY').isBetween(dayjs.tz(busy.start.dateTime, busy.start.timeZone), dayjs.tz(busy.end.dateTime, busy.end.timeZone), null, '[)')
+                  ))
+                )}
+              />
+            </Suspense>
           </div>
         </StyledMain>
       )}
diff --git a/crabfit-frontend/src/components/Error/errorStyle.ts b/crabfit-frontend/src/components/Error/errorStyle.ts
index 5f0f667..77568f3 100644
--- a/crabfit-frontend/src/components/Error/errorStyle.ts
+++ b/crabfit-frontend/src/components/Error/errorStyle.ts
@@ -22,6 +22,10 @@ export const Wrapper = styled.div`
     max-height: 60px;
     transition: opacity .15s .2s, max-height .2s, margin .2s, visibility .2s;
   `}
+  
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 `;
 
 export const CloseButton = styled.button`
diff --git a/crabfit-frontend/src/components/index.ts b/crabfit-frontend/src/components/index.ts
index 2838c00..de04478 100644
--- a/crabfit-frontend/src/components/index.ts
+++ b/crabfit-frontend/src/components/index.ts
@@ -10,8 +10,6 @@ export { default as AvailabilityViewer } from './AvailabilityViewer/Availability
 export { default as AvailabilityEditor } from './AvailabilityEditor/AvailabilityEditor';
 export { default as Error } from './Error/Error';
 export { default as Loading } from './Loading/Loading';
-export { default as GoogleCalendar } from './GoogleCalendar/GoogleCalendar';
-export { default as OutlookCalendar } from './OutlookCalendar/OutlookCalendar';
 
 export { default as Center } from './Center/Center';
 export { default as Donate } from './Donate/Donate';
@@ -20,3 +18,6 @@ export { default as Egg } from './Egg/Egg';
 export { default as Footer } from './Footer/Footer';
 export { default as Recents } from './Recents/Recents';
 export { default as Logo } from './Logo/Logo';
+
+export const _GoogleCalendar = () => import('./GoogleCalendar/GoogleCalendar');
+export const _OutlookCalendar = () => import('./OutlookCalendar/OutlookCalendar');