From 596ea219765e83fcacd8bab7a6fd8b2c6c469775 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 9 Oct 2023 22:29:57 -0500
Subject: [PATCH] Chunk ScheduleForm differently, fix screen blinking when
 compose is focused

---
 .../compose/components/compose-form.tsx       |  3 +-
 .../compose/components/schedule-form.tsx      | 34 ++++++++++---------
 src/features/ui/util/async-components.ts      |  1 -
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index e0de7438e..13a627b93 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -17,7 +17,7 @@ import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest
 import AutosuggestTextarea from 'soapbox/components/autosuggest-textarea';
 import { Button, HStack, Stack } from 'soapbox/components/ui';
 import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
-import { ComposeEditor, ScheduleForm } from 'soapbox/features/ui/util/async-components';
+import { ComposeEditor } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
 import { isMobile } from 'soapbox/is-mobile';
 
@@ -35,6 +35,7 @@ import PrivacyDropdown from './privacy-dropdown';
 import ReplyGroupIndicator from './reply-group-indicator';
 import ReplyMentions from './reply-mentions';
 import ScheduleButton from './schedule-button';
+import ScheduleForm from './schedule-form';
 import SpoilerButton from './spoiler-button';
 import SpoilerInput from './spoiler-input';
 import TextCharacterCounter from './text-character-counter';
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index aab6b8864..70b27056c 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { Suspense } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setSchedule, removeSchedule } from 'soapbox/actions/compose';
 import IconButton from 'soapbox/components/icon-button';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Input, Stack, Text } from 'soapbox/components/ui';
 import { DatePicker } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useCompose } from 'soapbox/hooks';
 
@@ -54,20 +54,22 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
         <FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
       </Text>
       <HStack space={2} alignItems='center'>
-        <DatePicker
-          selected={scheduledAt}
-          showTimeSelect
-          dateFormat='MMMM d, yyyy h:mm aa'
-          timeIntervals={15}
-          wrapperClassName='react-datepicker-wrapper'
-          onChange={onSchedule}
-          placeholderText={intl.formatMessage(messages.schedule)}
-          filterDate={isCurrentOrFutureDate}
-          filterTime={isFiveMinutesFromNow}
-          className={clsx({
-            'has-error': !isFiveMinutesFromNow(scheduledAt),
-          })}
-        />
+        <Suspense fallback={<Input type='text' disabled />}>
+          <DatePicker
+            selected={scheduledAt}
+            showTimeSelect
+            dateFormat='MMMM d, yyyy h:mm aa'
+            timeIntervals={15}
+            wrapperClassName='react-datepicker-wrapper'
+            onChange={onSchedule}
+            placeholderText={intl.formatMessage(messages.schedule)}
+            filterDate={isCurrentOrFutureDate}
+            filterTime={isFiveMinutesFromNow}
+            className={clsx({
+              'has-error': !isFiveMinutesFromNow(scheduledAt),
+            })}
+          />
+        </Suspense>
         <IconButton
           iconClassName='h-4 w-4'
           className='bg-transparent text-gray-400 hover:text-gray-600'
diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts
index a93048aeb..8f63658bb 100644
--- a/src/features/ui/util/async-components.ts
+++ b/src/features/ui/util/async-components.ts
@@ -107,7 +107,6 @@ export const UserIndex = lazy(() => import('soapbox/features/admin/user-index'))
 export const FederationRestrictions = lazy(() => import('soapbox/features/federation-restrictions'));
 export const Aliases = lazy(() => import('soapbox/features/aliases'));
 export const Migration = lazy(() => import('soapbox/features/migration'));
-export const ScheduleForm = lazy(() => import('soapbox/features/compose/components/schedule-form'));
 export const WhoToFollowPanel = lazy(() => import('soapbox/features/ui/components/who-to-follow-panel'));
 export const FollowRecommendations = lazy(() => import('soapbox/features/follow-recommendations'));
 export const Directory = lazy(() => import('soapbox/features/directory'));