Suspend calendar import buttons

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,6 +72,7 @@ const AvailabilityEditor = ({
       {isSpecificDates && (
         <StyledMain>
           <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
+            <Suspense fallback={<Loader />}>
               <GoogleCalendar
                 timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
                 timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
@@ -88,6 +93,7 @@ const AvailabilityEditor = ({
                   ))
                 )}
               />
+            </Suspense>
           </div>
         </StyledMain>
       )}

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`

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');