From cdfd31372f7f04b6e80345682bccf4a87508874b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 18 Sep 2021 16:54:47 -0500 Subject: [PATCH 1/9] Suggestions: chunk the wtf panel --- app/soapbox/features/ui/util/async-components.js | 4 ++++ app/soapbox/pages/default_page.js | 9 +++++++-- app/soapbox/pages/home_page.js | 9 ++++++--- app/soapbox/pages/profile_page.js | 9 +++++++-- 4 files changed, 24 insertions(+), 7 deletions(-) diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index d7543e842..489554014 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -282,6 +282,10 @@ export function ScheduleForm() { return import(/* webpackChunkName: "features/compose" */'../../compose/components/schedule_form'); } +export function WhoToFollowPanel() { + return import(/* webpackChunkName: "features/follow_recommendations" */'../components/who_to_follow_panel'); +} + export function FollowRecommendations() { return import(/* webpackChunkName: "features/follow_recommendations" */'../../follow_recommendations'); } diff --git a/app/soapbox/pages/default_page.js b/app/soapbox/pages/default_page.js index 71bfa96a2..6417e483e 100644 --- a/app/soapbox/pages/default_page.js +++ b/app/soapbox/pages/default_page.js @@ -1,7 +1,8 @@ import React from 'react'; import { connect } from 'react-redux'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import WhoToFollowPanel from 'soapbox/features/ui/components/who_to_follow_panel'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components'; import TrendsPanel from 'soapbox/features/ui/components/trends_panel'; import PromoPanel from 'soapbox/features/ui/components/promo_panel'; import FeaturesPanel from 'soapbox/features/ui/components/features_panel'; @@ -45,7 +46,11 @@ class DefaultPage extends ImmutablePureComponent {
{me ? : } {showTrendsPanel && } - {showWhoToFollowPanel && } + {showWhoToFollowPanel && ( + + {Component => } + + )}
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js index 5ed036719..0188a766b 100644 --- a/app/soapbox/pages/home_page.js +++ b/app/soapbox/pages/home_page.js @@ -6,11 +6,10 @@ import BundleContainer from '../features/ui/containers/bundle_container'; import ComposeFormContainer from '../features/compose/containers/compose_form_container'; import Avatar from '../components/avatar'; import UserPanel from 'soapbox/features/ui/components/user_panel'; -import WhoToFollowPanel from 'soapbox/features/ui/components/who_to_follow_panel'; import TrendsPanel from 'soapbox/features/ui/components/trends_panel'; import PromoPanel from 'soapbox/features/ui/components/promo_panel'; import FundingPanel from 'soapbox/features/ui/components/funding_panel'; -import { CryptoDonatePanel } from 'soapbox/features/ui/util/async-components'; +import { WhoToFollowPanel, CryptoDonatePanel } from 'soapbox/features/ui/util/async-components'; // import GroupSidebarPanel from '../features/groups/sidebar_panel'; import FeaturesPanel from 'soapbox/features/ui/components/features_panel'; import SignUpPanel from 'soapbox/features/ui/components/sign_up_panel'; @@ -88,7 +87,11 @@ class HomePage extends ImmutablePureComponent {
{me ? : } {showTrendsPanel && } - {showWhoToFollowPanel && } + {showWhoToFollowPanel && ( + + {Component => } + + )}
diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js index 648c26b07..c1376b2cf 100644 --- a/app/soapbox/pages/profile_page.js +++ b/app/soapbox/pages/profile_page.js @@ -5,7 +5,8 @@ import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Helmet from 'soapbox/components/helmet'; import HeaderContainer from '../features/account_timeline/containers/header_container'; -import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components'; import LinkFooter from '../features/ui/components/link_footer'; import SignUpPanel from '../features/ui/components/sign_up_panel'; import ProfileInfoPanel from '../features/ui/components/profile_info_panel'; @@ -99,8 +100,12 @@ class ProfilePage extends ImmutablePureComponent {
- {features.suggestions && } {account && } + {features.suggestions && ( + + {Component => } + + )}
From 7f741a3ad0691bc04cb9b216aa1ddfb9f0d69154 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 18 Sep 2021 17:05:34 -0500 Subject: [PATCH 2/9] Suggestions: make DRY, fix isLoading state --- .../follow_recommendations_container.js | 36 +++++++++++++++++++ .../features/follow_recommendations/index.js | 21 ++--------- app/soapbox/features/home_timeline/index.js | 36 +++++-------------- 3 files changed, 48 insertions(+), 45 deletions(-) create mode 100644 app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js diff --git a/app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js b/app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js new file mode 100644 index 000000000..657780f43 --- /dev/null +++ b/app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; +import Button from 'soapbox/components/button'; +import FollowRecommendationsList from './follow_recommendations_list'; + +export default class FollowRecommendationsContainer extends React.Component { + + static propTypes = { + onDone: PropTypes.func.isRequired, + } + + handleDone = () => { + this.props.onDone(); + } + + render() { + return ( +
+
+

+

+
+ + + +
+ +
+
+ ); + } + +} diff --git a/app/soapbox/features/follow_recommendations/index.js b/app/soapbox/features/follow_recommendations/index.js index 6e043c9f2..b3aa44ea6 100644 --- a/app/soapbox/features/follow_recommendations/index.js +++ b/app/soapbox/features/follow_recommendations/index.js @@ -1,9 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; import Column from 'soapbox/features/ui/components/column'; -import Button from 'soapbox/components/button'; -import FollowRecommendationsList from './components/follow_recommendations_list'; +import FollowRecommendationsContainer from './components/follow_recommendations_container'; export default class FollowRecommendations extends React.Component { @@ -11,7 +9,7 @@ export default class FollowRecommendations extends React.Component { router: PropTypes.object.isRequired, }; - handleDone = () => { + onDone = () => { const { router } = this.context; router.history.push('/'); @@ -20,20 +18,7 @@ export default class FollowRecommendations extends React.Component { render() { return ( -
-
-

-

-
- - - -
- -
-
+ ); } diff --git a/app/soapbox/features/home_timeline/index.js b/app/soapbox/features/home_timeline/index.js index 71a146549..e62865c77 100644 --- a/app/soapbox/features/home_timeline/index.js +++ b/app/soapbox/features/home_timeline/index.js @@ -9,12 +9,11 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ColumnSettingsContainer from './containers/column_settings_container'; import HomeColumnHeader from '../../components/home_column_header'; import { Link } from 'react-router-dom'; -import Button from 'soapbox/components/button'; import { OrderedSet as ImmutableOrderedSet } from 'immutable'; import { getFeatures } from 'soapbox/utils/features'; -function FollowRecommendationsList() { - return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_list'); +function FollowRecommendationsContainer() { + return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_container'); } const messages = defineMessages({ @@ -29,6 +28,7 @@ const mapStateToProps = state => { hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0, isPartial: state.getIn(['timelines', 'home', 'isPartial']), siteTitle: state.getIn(['instance', 'title']), + isLoading: state.getIn(['timelines', 'home', 'isLoading'], true), isEmpty: state.getIn(['timelines', 'home', 'items'], ImmutableOrderedSet()).isEmpty(), features, }; @@ -44,6 +44,7 @@ class HomeTimeline extends React.PureComponent { hasUnread: PropTypes.bool, isPartial: PropTypes.bool, siteTitle: PropTypes.string, + isLoading: PropTypes.bool, isEmpty: PropTypes.bool, features: PropTypes.object.isRequired, }; @@ -94,29 +95,8 @@ class HomeTimeline extends React.PureComponent { this.setState({ done: true }); } - renderFollowRecommendations = () => { - return ( -
-
-

-

-
- - - {Component => } - - -
- -
-
- ); - } - render() { - const { intl, hasUnread, siteTitle, isEmpty, features } = this.props; + const { intl, hasUnread, siteTitle, isLoading, isEmpty, features } = this.props; const { done } = this.state; return ( @@ -124,8 +104,10 @@ class HomeTimeline extends React.PureComponent { - {(features.suggestions && isEmpty && !done) ? ( - this.renderFollowRecommendations() + {(features.suggestions && isEmpty && !isLoading && !done) ? ( + + {Component => } + ) : ( Date: Thu, 16 Sep 2021 15:44:39 -0500 Subject: [PATCH 3/9] Chunk modal components into features/ui --- .../features/ui/components/modal_root.js | 44 +++++++++---------- .../features/ui/util/async-components.js | 44 +++++++++++++++++++ 2 files changed, 66 insertions(+), 22 deletions(-) diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js index 9f8a90b0a..220d7f7d8 100644 --- a/app/soapbox/features/ui/components/modal_root.js +++ b/app/soapbox/features/ui/components/modal_root.js @@ -4,45 +4,45 @@ import Base from '../../../components/modal_root'; import BundleContainer from '../containers/bundle_container'; import BundleModalError from './bundle_modal_error'; import ModalLoading from './modal_loading'; -import ActionsModal from './actions_modal'; -import MediaModal from './media_modal'; -import VideoModal from './video_modal'; -import BoostModal from './boost_modal'; -import ConfirmationModal from './confirmation_modal'; -import MissingDescriptionModal from './missing_description_modal'; -import FocalPointModal from './focal_point_modal'; -import HotkeysModal from './hotkeys_modal'; -import ComposeModal from './compose_modal'; -import UnauthorizedModal from './unauthorized_modal'; -import EditFederationModal from './edit_federation_modal'; import { + MediaModal, + VideoModal, + BoostModal, + ConfirmationModal, MuteModal, ReportModal, EmbedModal, CryptoDonateModal, ListEditor, ListAdder, + MissingDescriptionModal, + ActionsModal, + FocalPointModal, + HotkeysModal, + ComposeModal, + UnauthorizedModal, + EditFederationModal, } from '../../../features/ui/util/async-components'; const MODAL_COMPONENTS = { - 'MEDIA': () => Promise.resolve({ default: MediaModal }), - 'VIDEO': () => Promise.resolve({ default: VideoModal }), - 'BOOST': () => Promise.resolve({ default: BoostModal }), - 'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), - 'MISSING_DESCRIPTION': () => Promise.resolve({ default: MissingDescriptionModal }), + 'MEDIA': MediaModal, + 'VIDEO': VideoModal, + 'BOOST': BoostModal, + 'CONFIRM': ConfirmationModal, + 'MISSING_DESCRIPTION': MissingDescriptionModal, 'MUTE': MuteModal, 'REPORT': ReportModal, - 'ACTIONS': () => Promise.resolve({ default: ActionsModal }), + 'ACTIONS': ActionsModal, 'EMBED': EmbedModal, 'LIST_EDITOR': ListEditor, - 'FOCAL_POINT': () => Promise.resolve({ default: FocalPointModal }), + 'FOCAL_POINT': FocalPointModal, 'LIST_ADDER':ListAdder, - 'HOTKEYS': () => Promise.resolve({ default: HotkeysModal }), - 'COMPOSE': () => Promise.resolve({ default: ComposeModal }), - 'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }), + 'HOTKEYS': HotkeysModal, + 'COMPOSE': ComposeModal, + 'UNAUTHORIZED': UnauthorizedModal, 'CRYPTO_DONATE': CryptoDonateModal, - 'EDIT_FEDERATION': () => Promise.resolve({ default: EditFederationModal }), + 'EDIT_FEDERATION': EditFederationModal, }; export default class ModalRoot extends React.PureComponent { diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 489554014..5c66f6919 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -150,6 +150,50 @@ export function Audio() { return import(/* webpackChunkName: "features/audio" */'../../audio'); } +export function MediaModal() { + return import(/* webpackChunkName: "features/ui" */'../components/media_modal'); +} + +export function VideoModal() { + return import(/* webpackChunkName: "features/ui" */'../components/video_modal'); +} + +export function BoostModal() { + return import(/* webpackChunkName: "features/ui" */'../components/boost_modal'); +} + +export function ConfirmationModal() { + return import(/* webpackChunkName: "features/ui" */'../components/confirmation_modal'); +} + +export function MissingDescriptionModal() { + return import(/* webpackChunkName: "features/ui" */'../components/missing_description_modal'); +} + +export function ActionsModal() { + return import(/* webpackChunkName: "features/ui" */'../components/actions_modal'); +} + +export function FocalPointModal() { + return import(/* webpackChunkName: "features/ui" */'../components/focal_point_modal'); +} + +export function HotkeysModal() { + return import(/* webpackChunkName: "features/ui" */'../components/hotkeys_modal'); +} + +export function ComposeModal() { + return import(/* webpackChunkName: "features/ui" */'../components/compose_modal'); +} + +export function UnauthorizedModal() { + return import(/* webpackChunkName: "features/ui" */'../components/unauthorized_modal'); +} + +export function EditFederationModal() { + return import(/* webpackChunkName: "features/ui" */'../components/edit_federation_modal'); +} + export function EmbedModal() { return import(/* webpackChunkName: "modals/embed_modal" */'../components/embed_modal'); } From b0e37c773e76cc658bcb296952af6d92a7a45daf Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 18 Sep 2021 17:48:13 -0500 Subject: [PATCH 4/9] Load panels async --- app/soapbox/components/profile_hover_card.js | 7 ++- app/soapbox/containers/soapbox.js | 5 +- .../features/ui/util/async-components.js | 24 ++++++++++ app/soapbox/pages/default_page.js | 32 +++++++++---- app/soapbox/pages/home_page.js | 47 ++++++++++++++----- app/soapbox/pages/profile_page.js | 10 ++-- app/soapbox/pages/remote_instance_page.js | 17 +++++-- 7 files changed, 111 insertions(+), 31 deletions(-) diff --git a/app/soapbox/components/profile_hover_card.js b/app/soapbox/components/profile_hover_card.js index 202be475d..c9d1024e7 100644 --- a/app/soapbox/components/profile_hover_card.js +++ b/app/soapbox/components/profile_hover_card.js @@ -4,7 +4,8 @@ import { useSelector, useDispatch } from 'react-redux'; import { makeGetAccount } from 'soapbox/selectors'; import { injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import UserPanel from 'soapbox/features/ui/components/user_panel'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { UserPanel } from 'soapbox/features/ui/util/async-components'; import ActionButton from 'soapbox/features/ui/components/action_button'; import { isAdmin, isModerator } from 'soapbox/utils/accounts'; import Badge from 'soapbox/components/badge'; @@ -74,7 +75,9 @@ export const ProfileHoverCard = ({ visible }) => { }
- + + {Component => } + {badges.length > 0 &&
{badges} diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js index bc53d5c9d..1bde94db0 100644 --- a/app/soapbox/containers/soapbox.js +++ b/app/soapbox/containers/soapbox.js @@ -15,8 +15,6 @@ import UI from '../features/ui'; // import Introduction from '../features/introduction'; import { preload } from '../actions/preload'; import { IntlProvider } from 'react-intl'; -import { previewState as previewMediaState } from 'soapbox/features/ui/components/media_modal'; -import { previewState as previewVideoState } from 'soapbox/features/ui/components/video_modal'; import ErrorBoundary from '../components/error_boundary'; import { fetchInstance } from 'soapbox/actions/instance'; import { fetchSoapboxConfig } from 'soapbox/actions/soapbox'; @@ -30,6 +28,9 @@ import { FE_SUBDIRECTORY } from 'soapbox/build_config'; const validLocale = locale => Object.keys(messages).includes(locale); +const previewMediaState = 'previewMediaModal'; +const previewVideoState = 'previewVideoModal'; + export const store = configureStore(); store.dispatch(preload()); diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 5c66f6919..0c72d0b7b 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -290,6 +290,30 @@ export function ModerationLog() { return import(/* webpackChunkName: "features/admin/moderation_log" */'../../admin/moderation_log'); } +export function UserPanel() { + return import(/* webpackChunkName: "features/ui" */'../components/user_panel'); +} + +export function FeaturesPanel() { + return import(/* webpackChunkName: "features/ui" */'../components/features_panel'); +} + +export function PromoPanel() { + return import(/* webpackChunkName: "features/ui" */'../components/promo_panel'); +} + +export function SignUpPanel() { + return import(/* webpackChunkName: "features/ui" */'../components/sign_up_panel'); +} + +export function FundingPanel() { + return import(/* webpackChunkName: "features/ui" */'../components/funding_panel'); +} + +export function TrendsPanel() { + return import(/* webpackChunkName: "features/trends" */'../components/trends_panel'); +} + export function CryptoDonate() { return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate'); } diff --git a/app/soapbox/pages/default_page.js b/app/soapbox/pages/default_page.js index 6417e483e..1733eb147 100644 --- a/app/soapbox/pages/default_page.js +++ b/app/soapbox/pages/default_page.js @@ -2,11 +2,13 @@ import React from 'react'; import { connect } from 'react-redux'; import ImmutablePureComponent from 'react-immutable-pure-component'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; -import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components'; -import TrendsPanel from 'soapbox/features/ui/components/trends_panel'; -import PromoPanel from 'soapbox/features/ui/components/promo_panel'; -import FeaturesPanel from 'soapbox/features/ui/components/features_panel'; -import SignUpPanel from 'soapbox/features/ui/components/sign_up_panel'; +import { + WhoToFollowPanel, + TrendsPanel, + PromoPanel, + FeaturesPanel, + SignUpPanel, +} from 'soapbox/features/ui/util/async-components'; import LinkFooter from 'soapbox/features/ui/components/link_footer'; import { getFeatures } from 'soapbox/utils/features'; @@ -44,14 +46,28 @@ class DefaultPage extends ImmutablePureComponent {
- {me ? : } - {showTrendsPanel && } + {me ? ( + + {Component => } + + ) : ( + + {Component => } + + )} + {showTrendsPanel && ( + + {Component => } + + )} {showWhoToFollowPanel && ( {Component => } )} - + + {Component => } +
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js index 0188a766b..d571514dc 100644 --- a/app/soapbox/pages/home_page.js +++ b/app/soapbox/pages/home_page.js @@ -5,14 +5,17 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import BundleContainer from '../features/ui/containers/bundle_container'; import ComposeFormContainer from '../features/compose/containers/compose_form_container'; import Avatar from '../components/avatar'; -import UserPanel from 'soapbox/features/ui/components/user_panel'; -import TrendsPanel from 'soapbox/features/ui/components/trends_panel'; -import PromoPanel from 'soapbox/features/ui/components/promo_panel'; -import FundingPanel from 'soapbox/features/ui/components/funding_panel'; -import { WhoToFollowPanel, CryptoDonatePanel } from 'soapbox/features/ui/util/async-components'; +import { + WhoToFollowPanel, + CryptoDonatePanel, + UserPanel, + TrendsPanel, + PromoPanel, + FundingPanel, + FeaturesPanel, + SignUpPanel, +} from 'soapbox/features/ui/util/async-components'; // import GroupSidebarPanel from '../features/groups/sidebar_panel'; -import FeaturesPanel from 'soapbox/features/ui/components/features_panel'; -import SignUpPanel from 'soapbox/features/ui/components/sign_up_panel'; import LinkFooter from 'soapbox/features/ui/components/link_footer'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { getFeatures } from 'soapbox/utils/features'; @@ -56,8 +59,14 @@ class HomePage extends ImmutablePureComponent {
- - {showFundingPanel && } + + {Component => } + + {showFundingPanel && ( + + {Component => } + + )} {showCryptoDonatePanel && ( {Component => } @@ -85,14 +94,28 @@ class HomePage extends ImmutablePureComponent {
- {me ? : } - {showTrendsPanel && } + {me ? ( + + {Component => } + + ) : ( + + {Component => } + + )} + {showTrendsPanel && ( + + {Component => } + + )} {showWhoToFollowPanel && ( {Component => } )} - + + {Component => } +
diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js index c1376b2cf..663c77b3e 100644 --- a/app/soapbox/pages/profile_page.js +++ b/app/soapbox/pages/profile_page.js @@ -6,9 +6,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import Helmet from 'soapbox/components/helmet'; import HeaderContainer from '../features/account_timeline/containers/header_container'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; -import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components'; +import { + WhoToFollowPanel, + SignUpPanel, +} from 'soapbox/features/ui/util/async-components'; import LinkFooter from '../features/ui/components/link_footer'; -import SignUpPanel from '../features/ui/components/sign_up_panel'; import ProfileInfoPanel from '../features/ui/components/profile_info_panel'; import ProfileMediaPanel from '../features/ui/components/profile_media_panel'; import { getAcct } from 'soapbox/utils/accounts'; @@ -99,7 +101,9 @@ class ProfilePage extends ImmutablePureComponent {
- + + {Component => } + {account && } {features.suggestions && ( diff --git a/app/soapbox/pages/remote_instance_page.js b/app/soapbox/pages/remote_instance_page.js index b1a86ba9a..d6ed14437 100644 --- a/app/soapbox/pages/remote_instance_page.js +++ b/app/soapbox/pages/remote_instance_page.js @@ -1,8 +1,11 @@ import React from 'react'; import { connect } from 'react-redux'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import PromoPanel from 'soapbox/features/ui/components/promo_panel'; -import FeaturesPanel from 'soapbox/features/ui/components/features_panel'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { + PromoPanel, + FeaturesPanel, +} from 'soapbox/features/ui/util/async-components'; import LinkFooter from 'soapbox/features/ui/components/link_footer'; import InstanceInfoPanel from 'soapbox/features/ui/components/instance_info_panel'; import InstanceModerationPanel from 'soapbox/features/ui/components/instance_moderation_panel'; @@ -46,8 +49,14 @@ class RemoteInstancePage extends ImmutablePureComponent {
- {me && } - + {me && ( + + {Component => } + + )} + + {Component => } +
From abcdc1fd63f1b3bec7b41707e879099ded125c60 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 18 Sep 2021 19:17:55 -0500 Subject: [PATCH 5/9] Profile: make account panels async --- .../features/account/components/header.js | 21 +++++++++++-------- .../features/ui/util/async-components.js | 8 +++++++ app/soapbox/pages/profile_page.js | 14 +++++++++---- 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js index f5a4efe35..53a78015f 100644 --- a/app/soapbox/features/account/components/header.js +++ b/app/soapbox/features/account/components/header.js @@ -22,7 +22,8 @@ import Avatar from 'soapbox/components/avatar'; import { shortNumberFormat } from 'soapbox/utils/numbers'; import { NavLink } from 'react-router-dom'; import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container'; -import ProfileInfoPanel from '../../ui/components/profile_info_panel'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { ProfileInfoPanel } from 'soapbox/features/ui/util/async-components'; import { debounce } from 'lodash'; import StillImage from 'soapbox/components/still_image'; import ActionButton from 'soapbox/features/ui/components/action_button'; @@ -303,12 +304,13 @@ class Header extends ImmutablePureComponent {
- { - isSmallScreen && + {isSmallScreen && (
- + + {Component => } +
- } + )}
); @@ -380,12 +382,13 @@ class Header extends ImmutablePureComponent { }
- { - isSmallScreen && + {isSmallScreen && (
- + + {Component => } +
- } + )}
diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 0c72d0b7b..278edeae4 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -314,6 +314,14 @@ export function TrendsPanel() { return import(/* webpackChunkName: "features/trends" */'../components/trends_panel'); } +export function ProfileInfoPanel() { + return import(/* webpackChunkName: "features/account_timeline" */'../components/profile_info_panel'); +} + +export function ProfileMediaPanel() { + return import(/* webpackChunkName: "features/account_gallery" */'../components/profile_media_panel'); +} + export function CryptoDonate() { return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate'); } diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js index 663c77b3e..ad15d0cf3 100644 --- a/app/soapbox/pages/profile_page.js +++ b/app/soapbox/pages/profile_page.js @@ -9,10 +9,10 @@ import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; import { WhoToFollowPanel, SignUpPanel, + ProfileInfoPanel, + ProfileMediaPanel, } from 'soapbox/features/ui/util/async-components'; import LinkFooter from '../features/ui/components/link_footer'; -import ProfileInfoPanel from '../features/ui/components/profile_info_panel'; -import ProfileMediaPanel from '../features/ui/components/profile_media_panel'; import { getAcct } from 'soapbox/utils/accounts'; import { displayFqn } from 'soapbox/utils/state'; import { getFeatures } from 'soapbox/utils/features'; @@ -89,7 +89,9 @@ class ProfilePage extends ImmutablePureComponent {
- + + {Component => } +
@@ -104,7 +106,11 @@ class ProfilePage extends ImmutablePureComponent { {Component => } - {account && } + {account && ( + + {Component => } + + )} {features.suggestions && ( {Component => } From aa54e0bd0bfb52b6e8ad3677e6ea1dddc17b4872 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 18 Sep 2021 19:23:48 -0500 Subject: [PATCH 6/9] RemoteInstance: async panels --- app/soapbox/features/ui/util/async-components.js | 8 ++++++++ app/soapbox/pages/remote_instance_page.js | 14 ++++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 278edeae4..40b92d935 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -322,6 +322,14 @@ export function ProfileMediaPanel() { return import(/* webpackChunkName: "features/account_gallery" */'../components/profile_media_panel'); } +export function InstanceInfoPanel() { + return import(/* webpackChunkName: "features/remote_timeline" */'../components/profile_media_panel'); +} + +export function InstanceModerationPanel() { + return import(/* webpackChunkName: "features/remote_timeline" */'../components/profile_media_panel'); +} + export function CryptoDonate() { return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate'); } diff --git a/app/soapbox/pages/remote_instance_page.js b/app/soapbox/pages/remote_instance_page.js index d6ed14437..815a21ac7 100644 --- a/app/soapbox/pages/remote_instance_page.js +++ b/app/soapbox/pages/remote_instance_page.js @@ -5,10 +5,10 @@ import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; import { PromoPanel, FeaturesPanel, + InstanceInfoPanel, + InstanceModerationPanel, } from 'soapbox/features/ui/util/async-components'; import LinkFooter from 'soapbox/features/ui/components/link_footer'; -import InstanceInfoPanel from 'soapbox/features/ui/components/instance_info_panel'; -import InstanceModerationPanel from 'soapbox/features/ui/components/instance_moderation_panel'; import { federationRestrictionsDisclosed } from 'soapbox/utils/state'; import { isAdmin } from 'soapbox/utils/accounts'; @@ -36,8 +36,14 @@ class RemoteInstancePage extends ImmutablePureComponent {
- - {(disclosed || isAdmin) && } + + {Component => } + + {(disclosed || isAdmin) && ( + + {Component => } + + )}
From 1e77adda34c51caf25057b1e7f455dc601bdc390 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 18 Sep 2021 19:34:45 -0500 Subject: [PATCH 7/9] Admin: async components --- app/soapbox/features/ui/util/async-components.js | 8 ++++++++ app/soapbox/pages/admin_page.js | 15 +++++++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 40b92d935..1d3eae519 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -330,6 +330,14 @@ export function InstanceModerationPanel() { return import(/* webpackChunkName: "features/remote_timeline" */'../components/profile_media_panel'); } +export function LatestAccountsPanel() { + return import(/* webpackChunkName: "features/admin" */'../../admin/components/latest_accounts_panel'); +} + +export function AdminNav() { + return import(/* webpackChunkName: "features/admin" */'../../admin/components/admin_nav'); +} + export function CryptoDonate() { return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate'); } diff --git a/app/soapbox/pages/admin_page.js b/app/soapbox/pages/admin_page.js index a010581cc..a91d87461 100644 --- a/app/soapbox/pages/admin_page.js +++ b/app/soapbox/pages/admin_page.js @@ -1,8 +1,11 @@ import React from 'react'; import ImmutablePureComponent from 'react-immutable-pure-component'; import LinkFooter from '../features/ui/components/link_footer'; -import AdminNav from 'soapbox/features/admin/components/admin_nav'; -import LatestAccountsPanel from 'soapbox/features/admin/components/latest_accounts_panel'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { + AdminNav, + LatestAccountsPanel, +} from 'soapbox/features/ui/util/async-components'; export default class AdminPage extends ImmutablePureComponent { @@ -17,7 +20,9 @@ class AdminPage extends ImmutablePureComponent {
- + + {Component => } +
@@ -29,7 +34,9 @@ class AdminPage extends ImmutablePureComponent {
- + + {Component => } +
From aeddec28923c9a07709184ddc458304262d15fc0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 18 Sep 2021 20:01:04 -0500 Subject: [PATCH 8/9] UI: async UI components --- app/soapbox/features/public_layout/index.js | 17 ++++++-- app/soapbox/features/ui/index.js | 43 +++++++++++++------ .../features/ui/util/async-components.js | 24 +++++++++++ 3 files changed, 68 insertions(+), 16 deletions(-) diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js index 09dc1f263..fa33ef48a 100644 --- a/app/soapbox/features/public_layout/index.js +++ b/app/soapbox/features/public_layout/index.js @@ -1,9 +1,12 @@ import React from 'react'; import { connect } from 'react-redux'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; import { Switch, Route, Redirect } from 'react-router-dom'; -import NotificationsContainer from 'soapbox/features/ui/containers/notifications_container'; -import ModalContainer from 'soapbox/features/ui/containers/modal_container'; +import { + NotificationsContainer, + ModalContainer, +} from 'soapbox/features/ui/util/async-components'; import Header from './components/header'; import Footer from './components/footer'; import LandingPage from '../landing_page'; @@ -44,8 +47,14 @@ class PublicLayout extends ImmutablePureComponent {
- - + + + {Component => } + + + + {Component => } +
); } diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 02d1c0cee..694eb53ed 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -9,8 +9,6 @@ import { Switch, withRouter } from 'react-router-dom'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types'; -import NotificationsContainer from './containers/notifications_container'; -import ModalContainer from './containers/modal_container'; import { debounce } from 'lodash'; import { uploadCompose, resetCompose } from '../../actions/compose'; import { expandHomeTimeline } from '../../actions/timelines'; @@ -24,8 +22,6 @@ import { fetchFollowRequests } from '../../actions/accounts'; import { fetchScheduledStatuses } from '../../actions/scheduled_statuses'; import { WrappedRoute } from './util/react_router_helpers'; import BundleContainer from './containers/bundle_container'; -import UploadArea from './components/upload_area'; -import TabsBar from './components/tabs_bar'; import ProfilePage from 'soapbox/pages/profile_page'; // import GroupsPage from 'soapbox/pages/groups_page'; // import GroupPage from 'soapbox/pages/group_page'; @@ -35,12 +31,10 @@ import DefaultPage from 'soapbox/pages/default_page'; import EmptyPage from 'soapbox/pages/default_page'; import AdminPage from 'soapbox/pages/admin_page'; import RemoteInstancePage from 'soapbox/pages/remote_instance_page'; -import SidebarMenu from '../../components/sidebar_menu'; import { connectUserStream } from '../../actions/streaming'; import { Redirect } from 'react-router-dom'; import Icon from 'soapbox/components/icon'; import { isStaff, isAdmin } from 'soapbox/utils/accounts'; -import ProfileHoverCard from 'soapbox/components/profile_hover_card'; import { getAccessToken } from 'soapbox/utils/auth'; import { getFeatures } from 'soapbox/utils/features'; import { fetchCustomEmojis } from 'soapbox/actions/custom_emojis'; @@ -106,6 +100,12 @@ import { FederationRestrictions, Aliases, FollowRecommendations, + TabsBar, + SidebarMenu, + UploadArea, + NotificationsContainer, + ModalContainer, + ProfileHoverCard, } from './util/async-components'; // Dummy import, to make sure that ends up in the application bundle. @@ -651,23 +651,42 @@ class UI extends React.PureComponent { return (
- + + {Component => } + + {children} {me && floatingActionButton} - - - - {me && } + + {Component => } + + + + {Component => } + + + + {Component => } + + + {me && ( + + {Component => } + + )} {me && features.chats && !mobile && ( {Component => } )} - + + + {Component => } +
); diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 1d3eae519..3b2fe5df9 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -338,6 +338,30 @@ export function AdminNav() { return import(/* webpackChunkName: "features/admin" */'../../admin/components/admin_nav'); } +export function TabsBar() { + return import(/* webpackChunkName: "features/ui" */'../../ui/components/tabs_bar'); +} + +export function SidebarMenu() { + return import(/* webpackChunkName: "features/ui" */'../../../components/sidebar_menu'); +} + +export function UploadArea() { + return import(/* webpackChunkName: "features/compose" */'../components/upload_area'); +} + +export function NotificationsContainer() { + return import(/* webpackChunkName: "features/ui" */'../containers/notifications_container'); +} + +export function ModalContainer() { + return import(/* webpackChunkName: "features/ui" */'../containers/modal_container'); +} + +export function ProfileHoverCard() { + return import(/* webpackChunkName: "features/ui" */'soapbox/components/profile_hover_card'); +} + export function CryptoDonate() { return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate'); } From 08cdef59c9cdc3cd66a689110302963dae75850b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 18 Sep 2021 20:09:29 -0500 Subject: [PATCH 9/9] Don't load TabsBar async --- app/soapbox/features/ui/index.js | 6 ++---- app/soapbox/features/ui/util/async-components.js | 4 ---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 694eb53ed..bc3e7c6fd 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -22,6 +22,7 @@ import { fetchFollowRequests } from '../../actions/accounts'; import { fetchScheduledStatuses } from '../../actions/scheduled_statuses'; import { WrappedRoute } from './util/react_router_helpers'; import BundleContainer from './containers/bundle_container'; +import TabsBar from './components/tabs_bar'; import ProfilePage from 'soapbox/pages/profile_page'; // import GroupsPage from 'soapbox/pages/groups_page'; // import GroupPage from 'soapbox/pages/group_page'; @@ -100,7 +101,6 @@ import { FederationRestrictions, Aliases, FollowRecommendations, - TabsBar, SidebarMenu, UploadArea, NotificationsContainer, @@ -651,9 +651,7 @@ class UI extends React.PureComponent { return (
- - {Component => } - + {children} diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 3b2fe5df9..e49797956 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -338,10 +338,6 @@ export function AdminNav() { return import(/* webpackChunkName: "features/admin" */'../../admin/components/admin_nav'); } -export function TabsBar() { - return import(/* webpackChunkName: "features/ui" */'../../ui/components/tabs_bar'); -} - export function SidebarMenu() { return import(/* webpackChunkName: "features/ui" */'../../../components/sidebar_menu'); }