Delete Bundle component, use Suspense and React.lazy

src/components/attachment-thumbs.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
-import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch } from 'soapbox/hooks';
 
@@ -18,23 +17,21 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => {
   const { media, onClick, sensitive } = props;
   const dispatch = useAppDispatch();
 
-  const renderLoading = () => <div className='media-gallery--compact' />;
+  const fallback = <div className='media-gallery--compact' />;
   const onOpenMedia = (media: ImmutableList<Attachment>, index: number) => dispatch(openModal('MEDIA', { media, index }));
 
   return (
     <div className='attachment-thumbs'>
-      <Bundle fetchComponent={MediaGallery} loading={renderLoading}>
-        {(Component: any) => (
-          <Component
-            media={media}
-            onOpenMedia={onOpenMedia}
-            height={50}
-            compact
-            sensitive={sensitive}
-            visible
-          />
-        )}
-      </Bundle>
+      <Suspense fallback={fallback}>
+        <MediaGallery
+          media={media}
+          onOpenMedia={onOpenMedia}
+          height={50}
+          compact
+          sensitive={sensitive}
+          visible
+        />
+      </Suspense>
 
       {onClick && (
         <div className='attachment-thumbs__clickable-region' onClick={onClick} />

src/components/birthday-input.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import IconButton from 'soapbox/components/icon-button';
-import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
 import { DatePicker } from 'soapbox/features/ui/util/async-components';
 import { useInstance, useFeatures } from 'soapbox/hooks';
 
@@ -114,19 +113,17 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
 
   return (
     <div className='relative mt-1 rounded-md shadow-sm'>
-      <BundleContainer fetchComponent={DatePicker}>
-        {Component => (<Component
-          selected={selected}
-          wrapperClassName='react-datepicker-wrapper'
-          onChange={handleChange}
-          placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
-          minDate={new Date('1900-01-01')}
-          maxDate={maxDate}
-          required={required}
-          renderCustomHeader={renderCustomHeader}
-          isClearable={!required}
-        />)}
-      </BundleContainer>
+      <DatePicker
+        selected={selected}
+        wrapperClassName='react-datepicker-wrapper'
+        onChange={handleChange}
+        placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
+        minDate={new Date('1900-01-01')}
+        maxDate={maxDate}
+        required={required}
+        renderCustomHeader={renderCustomHeader}
+        isClearable={!required}
+      />
     </div>
   );
 };

src/components/profile-hover-card.tsx

@@ -12,7 +12,6 @@ import {
 import { useAccount, usePatronUser } from 'soapbox/api/hooks';
 import Badge from 'soapbox/components/badge';
 import ActionButton from 'soapbox/features/ui/components/action-button';
-import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
 import { UserPanel } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { isLocal } from 'soapbox/utils/accounts';
@@ -112,15 +111,11 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
       <Card variant='rounded' className='relative isolate overflow-hidden'>
         <CardBody>
           <Stack space={2}>
-            <BundleContainer fetchComponent={UserPanel}>
-              {Component => (
-                <Component
-                  accountId={account.id}
-                  action={<ActionButton account={account} small />}
-                  badges={badges}
-                />
-              )}
-            </BundleContainer>
+            <UserPanel
+              accountId={account.id}
+              action={<ActionButton account={account} small />}
+              badges={badges}
+            />
 
             {isLocal(account) ? (
               <HStack alignItems='center' space={0.5}>

src/components/status-media.tsx

@@ -1,16 +1,14 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
 import Card from 'soapbox/features/status/components/card';
-import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type { List as ImmutableList } from 'immutable';
-import type VideoType from 'soapbox/features/video';
 import type { Status, Attachment } from 'soapbox/types/entities';
 
 interface IStatusMedia {
@@ -70,54 +68,48 @@ const StatusMedia: React.FC<IStatusMedia> = ({
       const video = firstAttachment;
 
       media = (
-        <Bundle fetchComponent={Video} loading={renderLoadingVideoPlayer}>
-          {(Component: typeof VideoType) => (
-            <Component
-              preview={video.preview_url}
-              blurhash={video.blurhash}
-              src={video.url}
-              alt={video.description}
-              aspectRatio={Number(video.meta.getIn(['original', 'aspect']))}
-              height={285}
-              visible={showMedia}
-              inline
-            />
-          )}
-        </Bundle>
+        <Suspense fallback={renderLoadingVideoPlayer()}>
+          <Video
+            preview={video.preview_url}
+            blurhash={video.blurhash}
+            src={video.url}
+            alt={video.description}
+            aspectRatio={Number(video.meta.getIn(['original', 'aspect']))}
+            height={285}
+            visible={showMedia}
+            inline
+          />
+        </Suspense>
       );
     } else if (size === 1 && firstAttachment.type === 'audio') {
       const attachment = firstAttachment;
 
       media = (
-        <Bundle fetchComponent={Audio} loading={renderLoadingAudioPlayer}>
-          {(Component: any) => (
-            <Component
-              src={attachment.url}
-              alt={attachment.description}
-              poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status.getIn(['account', 'avatar_static'])}
-              backgroundColor={attachment.meta.getIn(['colors', 'background'])}
-              foregroundColor={attachment.meta.getIn(['colors', 'foreground'])}
-              accentColor={attachment.meta.getIn(['colors', 'accent'])}
-              duration={attachment.meta.getIn(['original', 'duration'], 0)}
-              height={263}
-            />
-          )}
-        </Bundle>
+        <Suspense fallback={renderLoadingAudioPlayer()}>
+          <Audio
+            src={attachment.url}
+            alt={attachment.description}
+            poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status.getIn(['account', 'avatar_static']) as string | undefined}
+            backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined}
+            foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined}
+            accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined}
+            duration={attachment.meta.getIn(['original', 'duration'], 0)  as number | undefined}
+            height={263}
+          />
+        </Suspense>
       );
     } else {
       media = (
-        <Bundle fetchComponent={MediaGallery} loading={renderLoadingMediaGallery}>
-          {(Component: any) => (
-            <Component
-              media={status.media_attachments}
-              sensitive={status.sensitive}
-              height={285}
-              onOpenMedia={openMedia}
-              visible={showMedia}
-              onToggleVisibility={onToggleVisibility}
-            />
-          )}
-        </Bundle>
+        <Suspense fallback={renderLoadingMediaGallery()}>
+          <MediaGallery
+            media={status.media_attachments}
+            sensitive={status.sensitive}
+            height={285}
+            onOpenMedia={openMedia}
+            visible={showMedia}
+            onToggleVisibility={onToggleVisibility}
+          />
+        </Suspense>
       );
     }
   } else if (status.spoiler_text.length === 0 && !status.quote && status.card?.group) {