{columns.map(column => {
- const SpecificComponent = componentMap[column.get('id')];
const params = column.get('params', null) === null ? null : column.get('params').toJS();
- return
+ );
})}
{React.Children.map(children, child => React.cloneElement(child, { multiColumn: true }))}
diff --git a/app/javascript/mastodon/features/ui/components/modal_loading.js b/app/javascript/mastodon/features/ui/components/modal_loading.js
new file mode 100644
index 00000000000..f403ca4c9e9
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/modal_loading.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import LoadingIndicator from '../../../components/loading_indicator';
+
+// Keep the markup in sync with
+);
+
+export default ModalLoading;
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js
index 48b048eb7e3..085299038ac 100644
--- a/app/javascript/mastodon/features/ui/components/modal_root.js
+++ b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -1,13 +1,18 @@
import React from 'react';
import PropTypes from 'prop-types';
-import MediaModal from './media_modal';
-import OnboardingModal from './onboarding_modal';
-import VideoModal from './video_modal';
-import BoostModal from './boost_modal';
-import ConfirmationModal from './confirmation_modal';
-import ReportModal from './report_modal';
import TransitionMotion from 'react-motion/lib/TransitionMotion';
import spring from 'react-motion/lib/spring';
+import BundleContainer from '../containers/bundle_container';
+import BundleModalError from './bundle_modal_error';
+import ModalLoading from './modal_loading';
+import {
+ MediaModal,
+ OnboardingModal,
+ VideoModal,
+ BoostModal,
+ ConfirmationModal,
+ ReportModal,
+} from '../../../features/ui/util/async-components';
const MODAL_COMPONENTS = {
'MEDIA': MediaModal,
@@ -49,6 +54,22 @@ export default class ModalRoot extends React.PureComponent {
return { opacity: spring(0), scale: spring(0.98) };
}
+ renderModal = (SpecificComponent) => {
+ const { props, onClose } = this.props;
+
+ return
;
+ }
+
+ renderError = (props) => {
+ const { onClose } = this.props;
+
+ return
;
+ }
+
render () {
const { type, props, onClose } = this.props;
const visible = !!type;
@@ -70,18 +91,14 @@ export default class ModalRoot extends React.PureComponent {
>
{interpolatedStyles =>
- {interpolatedStyles.map(({ key, data: { type, props }, style }) => {
- const SpecificComponent = MODAL_COMPONENTS[type];
-
- return (
-
-
-
-
-
+ {interpolatedStyles.map(({ key, data: { type }, style }) => (
+
+
+
+ {this.renderModal}
- );
- })}
+
+ ))}
}
diff --git a/app/javascript/mastodon/features/ui/containers/bundle_container.js b/app/javascript/mastodon/features/ui/containers/bundle_container.js
new file mode 100644
index 00000000000..7e3f0c3a6bb
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/containers/bundle_container.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+
+import Bundle from '../components/bundle';
+
+import { fetchBundleRequest, fetchBundleSuccess, fetchBundleFail } from '../../../actions/bundles';
+
+const mapDispatchToProps = dispatch => ({
+ onFetch () {
+ dispatch(fetchBundleRequest());
+ },
+ onFetchSuccess () {
+ dispatch(fetchBundleSuccess());
+ },
+ onFetchFail (error) {
+ dispatch(fetchBundleFail(error));
+ },
+});
+
+export default connect(null, mapDispatchToProps)(Bundle);
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 54e623d9952..6057d87970d 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -1,7 +1,5 @@
import React from 'react';
import classNames from 'classnames';
-import Switch from 'react-router-dom/Switch';
-import Route from 'react-router-dom/Route';
import Redirect from 'react-router-dom/Redirect';
import NotificationsContainer from './containers/notifications_container';
import PropTypes from 'prop-types';
@@ -14,64 +12,40 @@ import { debounce } from 'lodash';
import { uploadCompose } from '../../actions/compose';
import { refreshHomeTimeline } from '../../actions/timelines';
import { refreshNotifications } from '../../actions/notifications';
+import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
import UploadArea from './components/upload_area';
+import { store } from '../../containers/mastodon';
import ColumnsAreaContainer from './containers/columns_area_container';
-import Status from '../../features/status';
-import GettingStarted from '../../features/getting_started';
-import PublicTimeline from '../../features/public_timeline';
-import CommunityTimeline from '../../features/community_timeline';
-import AccountTimeline from '../../features/account_timeline';
-import AccountGallery from '../../features/account_gallery';
-import HomeTimeline from '../../features/home_timeline';
-import Compose from '../../features/compose';
-import Followers from '../../features/followers';
-import Following from '../../features/following';
-import Reblogs from '../../features/reblogs';
-import Favourites from '../../features/favourites';
-import HashtagTimeline from '../../features/hashtag_timeline';
-import Notifications from '../../features/notifications';
-import FollowRequests from '../../features/follow_requests';
-import GenericNotFound from '../../features/generic_not_found';
-import FavouritedStatuses from '../../features/favourited_statuses';
-import Blocks from '../../features/blocks';
-import Mutes from '../../features/mutes';
+import {
+ Compose,
+ Status,
+ GettingStarted,
+ PublicTimeline,
+ CommunityTimeline,
+ AccountTimeline,
+ AccountGallery,
+ HomeTimeline,
+ Followers,
+ Following,
+ Reblogs,
+ Favourites,
+ HashtagTimeline,
+ Notifications as AsyncNotifications,
+ FollowRequests,
+ GenericNotFound,
+ FavouritedStatuses,
+ Blocks,
+ Mutes,
+} from './util/async-components';
-// Small wrapper to pass multiColumn to the route components
-const WrappedSwitch = ({ multiColumn, children }) => (
-
- {React.Children.map(children, child => React.cloneElement(child, { multiColumn }))}
-
-);
+const Notifications = () => AsyncNotifications().then(component => {
+ store.dispatch(refreshNotifications());
+ return component;
+});
-WrappedSwitch.propTypes = {
- multiColumn: PropTypes.bool,
- children: PropTypes.node,
-};
-
-// Small Wraper to extract the params from the route and pass
-// them to the rendered component, together with the content to
-// be rendered inside (the children)
-class WrappedRoute extends React.Component {
-
- static propTypes = {
- component: PropTypes.func.isRequired,
- content: PropTypes.node,
- multiColumn: PropTypes.bool,
- }
-
- renderComponent = ({ match: { params } }) => {
- const { component: Component, content, multiColumn } = this.props;
-
- return
{content};
- }
-
- render () {
- const { component: Component, content, ...rest } = this.props;
-
- return
;
- }
-
-}
+// Dummy import, to make sure that
ends up in the application bundle.
+// Without this it ends up in ~8 very commonly used bundles.
+import '../../components/status';
const mapStateToProps = state => ({
systemFontUi: state.getIn(['meta', 'system_font_ui']),
@@ -162,7 +136,6 @@ export default class UI extends React.PureComponent {
document.addEventListener('dragend', this.handleDragEnd, false);
this.props.dispatch(refreshHomeTimeline());
- this.props.dispatch(refreshNotifications());
}
componentWillUnmount () {
diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js
new file mode 100644
index 00000000000..c9f81136d08
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/util/async-components.js
@@ -0,0 +1,143 @@
+import { store } from '../../../containers/mastodon';
+import { injectAsyncReducer } from '../../../store/configureStore';
+
+// NOTE: When lazy-loading reducers, make sure to add them
+// to application.html.haml (if the component is preloaded there)
+
+export function EmojiPicker () {
+ return import(/* webpackChunkName: "emojione_picker" */'emojione-picker');
+}
+
+export function Compose () {
+ return Promise.all([
+ import(/* webpackChunkName: "features/compose" */'../../compose'),
+ import(/* webpackChunkName: "reducers/compose" */'../../../reducers/compose'),
+ import(/* webpackChunkName: "reducers/media_attachments" */'../../../reducers/media_attachments'),
+ import(/* webpackChunkName: "reducers/search" */'../../../reducers/search'),
+ ]).then(([component, composeReducer, mediaAttachmentsReducer, searchReducer]) => {
+ injectAsyncReducer(store, 'compose', composeReducer.default);
+ injectAsyncReducer(store, 'media_attachments', mediaAttachmentsReducer.default);
+ injectAsyncReducer(store, 'search', searchReducer.default);
+
+ return component;
+ });
+}
+
+export function Notifications () {
+ return Promise.all([
+ import(/* webpackChunkName: "features/notifications" */'../../notifications'),
+ import(/* webpackChunkName: "reducers/notifications" */'../../../reducers/notifications'),
+ ]).then(([component, notificationsReducer]) => {
+ injectAsyncReducer(store, 'notifications', notificationsReducer.default);
+
+ return component;
+ });
+}
+
+export function HomeTimeline () {
+ return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline');
+}
+
+export function PublicTimeline () {
+ return import(/* webpackChunkName: "features/public_timeline" */'../../public_timeline');
+}
+
+export function CommunityTimeline () {
+ return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline');
+}
+
+export function HashtagTimeline () {
+ return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline');
+}
+
+export function Status () {
+ return import(/* webpackChunkName: "features/status" */'../../status');
+}
+
+export function GettingStarted () {
+ return import(/* webpackChunkName: "features/getting_started" */'../../getting_started');
+}
+
+export function AccountTimeline () {
+ return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline');
+}
+
+export function AccountGallery () {
+ return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery');
+}
+
+export function Followers () {
+ return import(/* webpackChunkName: "features/followers" */'../../followers');
+}
+
+export function Following () {
+ return import(/* webpackChunkName: "features/following" */'../../following');
+}
+
+export function Reblogs () {
+ return import(/* webpackChunkName: "features/reblogs" */'../../reblogs');
+}
+
+export function Favourites () {
+ return import(/* webpackChunkName: "features/favourites" */'../../favourites');
+}
+
+export function FollowRequests () {
+ return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests');
+}
+
+export function GenericNotFound () {
+ return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found');
+}
+
+export function FavouritedStatuses () {
+ return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses');
+}
+
+export function Blocks () {
+ return import(/* webpackChunkName: "features/blocks" */'../../blocks');
+}
+
+export function Mutes () {
+ return import(/* webpackChunkName: "features/mutes" */'../../mutes');
+}
+
+export function MediaModal () {
+ return import(/* webpackChunkName: "modals/media_modal" */'../components/media_modal');
+}
+
+export function OnboardingModal () {
+ return Promise.all([
+ import(/* webpackChunkName: "modals/onboarding_modal" */'../components/onboarding_modal'),
+ import(/* webpackChunkName: "reducers/compose" */'../../../reducers/compose'),
+ import(/* webpackChunkName: "reducers/media_attachments" */'../../../reducers/media_attachments'),
+ ]).then(([component, composeReducer, mediaAttachmentsReducer]) => {
+ injectAsyncReducer(store, 'compose', composeReducer.default);
+ injectAsyncReducer(store, 'media_attachments', mediaAttachmentsReducer.default);
+ return component;
+ });
+}
+
+export function VideoModal () {
+ return import(/* webpackChunkName: "modals/video_modal" */'../components/video_modal');
+}
+
+export function BoostModal () {
+ return import(/* webpackChunkName: "modals/boost_modal" */'../components/boost_modal');
+}
+
+export function ConfirmationModal () {
+ return import(/* webpackChunkName: "modals/confirmation_modal" */'../components/confirmation_modal');
+}
+
+export function ReportModal () {
+ return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal');
+}
+
+export function MediaGallery () {
+ return import(/* webpackChunkName: "status/MediaGallery" */'../../../components/media_gallery');
+}
+
+export function VideoPlayer () {
+ return import(/* webpackChunkName: "status/VideoPlayer" */'../../../components/video_player');
+}
diff --git a/app/javascript/mastodon/features/ui/util/react_router_helpers.js b/app/javascript/mastodon/features/ui/util/react_router_helpers.js
new file mode 100644
index 00000000000..e33a6df6f49
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/util/react_router_helpers.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Switch from 'react-router-dom/Switch';
+import Route from 'react-router-dom/Route';
+
+import ColumnLoading from '../components/column_loading';
+import BundleColumnError from '../components/bundle_column_error';
+import BundleContainer from '../containers/bundle_container';
+
+// Small wrapper to pass multiColumn to the route components
+export const WrappedSwitch = ({ multiColumn, children }) => (
+
+ {React.Children.map(children, child => React.cloneElement(child, { multiColumn }))}
+
+);
+
+WrappedSwitch.propTypes = {
+ multiColumn: PropTypes.bool,
+ children: PropTypes.node,
+};
+
+// Small Wraper to extract the params from the route and pass
+// them to the rendered component, together with the content to
+// be rendered inside (the children)
+export class WrappedRoute extends React.Component {
+
+ static propTypes = {
+ component: PropTypes.func.isRequired,
+ content: PropTypes.node,
+ multiColumn: PropTypes.bool,
+ }
+
+ renderComponent = ({ match }) => {
+ this.match = match; // Needed for this.renderBundle
+
+ const { component } = this.props;
+
+ return (
+
+ {this.renderBundle}
+
+ );
+ }
+
+ renderLoading = () => {
+ return
;
+ }
+
+ renderError = (props) => {
+ return
;
+ }
+
+ renderBundle = (Component) => {
+ const { match: { params }, props: { content, multiColumn } } = this;
+
+ return
{content};
+ }
+
+ render () {
+ const { component: Component, content, ...rest } = this.props;
+
+ return
;
+ }
+
+}
diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js
index d0b47a85c2c..09db95e2d7e 100644
--- a/app/javascript/mastodon/reducers/compose.js
+++ b/app/javascript/mastodon/reducers/compose.js
@@ -23,7 +23,7 @@ import {
COMPOSE_EMOJI_INSERT,
} from '../actions/compose';
import { TIMELINE_DELETE } from '../actions/timelines';
-import { STORE_HYDRATE } from '../actions/store';
+import { STORE_HYDRATE_LAZY } from '../actions/store';
import Immutable from 'immutable';
import uuid from '../uuid';
@@ -134,7 +134,7 @@ const privacyPreference = (a, b) => {
export default function compose(state = initialState, action) {
switch(action.type) {
- case STORE_HYDRATE:
+ case `${STORE_HYDRATE_LAZY}-compose`:
return clearAll(state.merge(action.state.get('compose')));
case COMPOSE_MOUNT:
return state.set('mounted', true);
diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js
index be402a16b1b..79062f2f9c2 100644
--- a/app/javascript/mastodon/reducers/index.js
+++ b/app/javascript/mastodon/reducers/index.js
@@ -1,7 +1,6 @@
import { combineReducers } from 'redux-immutable';
import timelines from './timelines';
import meta from './meta';
-import compose from './compose';
import alerts from './alerts';
import { loadingBarReducer } from 'react-redux-loading-bar';
import modal from './modal';
@@ -9,20 +8,16 @@ import user_lists from './user_lists';
import accounts from './accounts';
import accounts_counters from './accounts_counters';
import statuses from './statuses';
-import media_attachments from './media_attachments';
import relationships from './relationships';
-import search from './search';
-import notifications from './notifications';
import settings from './settings';
import status_lists from './status_lists';
import cards from './cards';
import reports from './reports';
import contexts from './contexts';
-export default combineReducers({
+const reducers = {
timelines,
meta,
- compose,
alerts,
loadingBar: loadingBarReducer,
modal,
@@ -30,13 +25,19 @@ export default combineReducers({
status_lists,
accounts,
accounts_counters,
- media_attachments,
statuses,
relationships,
- search,
- notifications,
settings,
cards,
reports,
contexts,
-});
+};
+
+export function createReducer(asyncReducers) {
+ return combineReducers({
+ ...reducers,
+ ...asyncReducers,
+ });
+}
+
+export default combineReducers(reducers);
diff --git a/app/javascript/mastodon/reducers/media_attachments.js b/app/javascript/mastodon/reducers/media_attachments.js
index 85bea4f0b38..d17d465aa49 100644
--- a/app/javascript/mastodon/reducers/media_attachments.js
+++ b/app/javascript/mastodon/reducers/media_attachments.js
@@ -1,4 +1,4 @@
-import { STORE_HYDRATE } from '../actions/store';
+import { STORE_HYDRATE_LAZY } from '../actions/store';
import Immutable from 'immutable';
const initialState = Immutable.Map({
@@ -7,7 +7,7 @@ const initialState = Immutable.Map({
export default function meta(state = initialState, action) {
switch(action.type) {
- case STORE_HYDRATE:
+ case `${STORE_HYDRATE_LAZY}-media_attachments`:
return state.merge(action.state.get('media_attachments'));
default:
return state;
diff --git a/app/javascript/mastodon/store/configureStore.js b/app/javascript/mastodon/store/configureStore.js
index 1376d4cbaf5..0fe29f031a2 100644
--- a/app/javascript/mastodon/store/configureStore.js
+++ b/app/javascript/mastodon/store/configureStore.js
@@ -1,15 +1,36 @@
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
-import appReducer from '../reducers';
+import appReducer, { createReducer } from '../reducers';
+import { hydrateStoreLazy } from '../actions/store';
+import { hydrateAction } from '../containers/mastodon';
import loadingBarMiddleware from '../middleware/loading_bar';
import errorsMiddleware from '../middleware/errors';
import soundsMiddleware from '../middleware/sounds';
export default function configureStore() {
- return createStore(appReducer, compose(applyMiddleware(
+ const store = createStore(appReducer, compose(applyMiddleware(
thunk,
loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'] }),
errorsMiddleware(),
soundsMiddleware()
), window.devToolsExtension ? window.devToolsExtension() : f => f));
+
+ store.asyncReducers = { };
+
+ return store;
};
+
+export function injectAsyncReducer(store, name, asyncReducer) {
+ if (!store.asyncReducers[name]) {
+ // Keep track that we injected this reducer
+ store.asyncReducers[name] = asyncReducer;
+
+ // Add the current reducer to the store
+ store.replaceReducer(createReducer(store.asyncReducers));
+
+ // The state this reducer handles defaults to its initial state (stored inside the reducer)
+ // But that state may be out of date because of the server-side hydration, so we replay
+ // the hydration action but only for this reducer (all async reducers must listen for this dynamic action)
+ store.dispatch(hydrateStoreLazy(name, hydrateAction.state));
+ }
+}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index a87aa5d79bf..9b500c7ad99 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -2300,7 +2300,8 @@ button.icon-button.active i.fa-retweet {
vertical-align: middle;
}
-.empty-column-indicator {
+.empty-column-indicator,
+.error-column {
color: lighten($ui-base-color, 20%);
background: $ui-base-color;
text-align: center;
@@ -2326,6 +2327,10 @@ button.icon-button.active i.fa-retweet {
}
}
+.error-column {
+ flex-direction: column;
+}
+
@keyframes pulse {
0% {
opacity: 1;
@@ -2909,7 +2914,8 @@ button.icon-button.active i.fa-retweet {
z-index: 100;
}
-.onboarding-modal {
+.onboarding-modal,
+.error-modal {
background: $ui-secondary-color;
color: $ui-base-color;
border-radius: 8px;
@@ -2918,7 +2924,8 @@ button.icon-button.active i.fa-retweet {
flex-direction: column;
}
-.onboarding-modal__pager {
+.onboarding-modal__pager,
+.error-modal__body {
height: 80vh;
width: 80vw;
max-width: 520px;
@@ -2943,6 +2950,14 @@ button.icon-button.active i.fa-retweet {
}
}
+.error-modal__body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
@media screen and (max-width: 550px) {
.onboarding-modal {
width: 100%;
@@ -2959,7 +2974,8 @@ button.icon-button.active i.fa-retweet {
}
}
-.onboarding-modal__paginator {
+.onboarding-modal__paginator,
+.error-modal__footer {
flex: 0 0 auto;
background: darken($ui-secondary-color, 8%);
display: flex;
@@ -2969,7 +2985,8 @@ button.icon-button.active i.fa-retweet {
min-width: 33px;
}
- .onboarding-modal__nav {
+ .onboarding-modal__nav,
+ .error-modal__nav {
color: darken($ui-secondary-color, 34%);
background-color: transparent;
border: 0;
@@ -2992,6 +3009,10 @@ button.icon-button.active i.fa-retweet {
}
}
+.error-modal__footer {
+ justify-content: center;
+}
+
.onboarding-modal__dots {
flex: 1 1 auto;
display: flex;
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index f991bc74f57..68d3468590d 100755
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -20,6 +20,23 @@
= stylesheet_pack_tag 'application', media: 'all'
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
+
+ = javascript_pack_tag 'features/getting_started', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+
+ = javascript_pack_tag 'features/compose', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+ = javascript_pack_tag 'reducers/compose', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+ = javascript_pack_tag 'reducers/media_attachments', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+ = javascript_pack_tag 'reducers/search', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+
+ = javascript_pack_tag 'features/home_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+
+ = javascript_pack_tag 'features/notifications', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+ = javascript_pack_tag 'reducers/notifications', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+
+ = javascript_pack_tag 'features/community_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+
+ = javascript_pack_tag 'features/public_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script'
+
= javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
= csrf_meta_tags