Chunk ScheduleForm differently, fix screen blinking when compose is focused

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

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
+        <Suspense fallback={<Input type='text' disabled />}>
-          selected={scheduledAt}
+          <DatePicker
-          showTimeSelect
+            selected={scheduledAt}
-          dateFormat='MMMM d, yyyy h:mm aa'
+            showTimeSelect
-          timeIntervals={15}
+            dateFormat='MMMM d, yyyy h:mm aa'
-          wrapperClassName='react-datepicker-wrapper'
+            timeIntervals={15}
-          onChange={onSchedule}
+            wrapperClassName='react-datepicker-wrapper'
-          placeholderText={intl.formatMessage(messages.schedule)}
+            onChange={onSchedule}
-          filterDate={isCurrentOrFutureDate}
+            placeholderText={intl.formatMessage(messages.schedule)}
-          filterTime={isFiveMinutesFromNow}
+            filterDate={isCurrentOrFutureDate}
-          className={clsx({
+            filterTime={isFiveMinutesFromNow}
-            'has-error': !isFiveMinutesFromNow(scheduledAt),
+            className={clsx({
-          })}
+              'has-error': !isFiveMinutesFromNow(scheduledAt),
-        />
+            })}
+          />
+        </Suspense>
         <IconButton
           iconClassName='h-4 w-4'
           className='bg-transparent text-gray-400 hover:text-gray-600'

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