Delete Bundle component, use Suspense and React.lazy

src/features/compose/components/compose-form.tsx

@@ -17,14 +17,12 @@ 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 Bundle from 'soapbox/features/ui/components/bundle';
-import { ComposeEditor } from 'soapbox/features/ui/util/async-components';
+import { ComposeEditor, ScheduleForm } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
 import { isMobile } from 'soapbox/is-mobile';
 
 import QuotedStatusContainer from '../containers/quoted-status-container';
 import ReplyIndicatorContainer from '../containers/reply-indicator-container';
-import ScheduleFormContainer from '../containers/schedule-form-container';
 import UploadButtonContainer from '../containers/upload-button-container';
 import WarningContainer from '../containers/warning-container';
 import { $createEmojiNode } from '../editor/nodes/emoji-node';
@@ -260,7 +258,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
         ref={spoilerTextRef}
       />
 
-      <ScheduleFormContainer composeId={id} />
+      <ScheduleForm composeId={id} />
     </Stack>
   );
 
@@ -313,23 +311,19 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       {!shouldCondense && !event && !group && <ReplyMentions composeId={id} />}
 
       <div>
-        <Bundle fetchComponent={ComposeEditor}>
-          {(Component: any) => (
-            <Component
-              ref={editorRef}
-              className='mt-2'
-              composeId={id}
-              condensed={condensed}
-              eventDiscussion={!!event}
-              autoFocus={shouldAutoFocus}
-              hasPoll={hasPoll}
-              handleSubmit={handleSubmit}
-              onChange={setText}
-              onFocus={handleComposeFocus}
-              onPaste={onPaste}
-            />
-          )}
-        </Bundle>
+        <ComposeEditor
+          ref={editorRef}
+          className='mt-2'
+          composeId={id}
+          condensed={condensed}
+          eventDiscussion={!!event}
+          autoFocus={shouldAutoFocus}
+          hasPoll={hasPoll}
+          handleSubmit={handleSubmit}
+          onChange={setText}
+          onFocus={handleComposeFocus}
+          onPaste={onPaste}
+        />
         {composeModifiers}
       </div>
 

src/features/compose/components/schedule-form.tsx

@@ -5,7 +5,6 @@ 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 BundleContainer from 'soapbox/features/ui/containers/bundle-container';
 import { DatePicker } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useCompose } from 'soapbox/hooks';
 
@@ -55,22 +54,20 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
         <FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
       </Text>
       <HStack space={2} alignItems='center'>
-        <BundleContainer fetchComponent={DatePicker}>
-          {Component => (<Component
-            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),
-            })}
-          />)}
-        </BundleContainer>
+        <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),
+          })}
+        />
         <IconButton
           iconClassName='h-4 w-4'
           className='bg-transparent text-gray-400 hover:text-gray-600'

src/features/compose/containers/schedule-form-container.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
-import { ScheduleForm } from 'soapbox/features/ui/util/async-components';
-
-import type { IScheduleForm } from '../components/schedule-form';
-
-const ScheduleFormContainer: React.FC<IScheduleForm> = (props) => (
-  <BundleContainer fetchComponent={ScheduleForm}>
-    {Component => <Component {...props} />}
-  </BundleContainer>
-);
-
-export default ScheduleFormContainer;