Merge branch 'datepicker-async' into 'develop'

Load react-datepicker asynchronously

Closes #855

See merge request soapbox-pub/soapbox-fe!1086

app/soapbox/components/birthday_input.js

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import DatePicker from 'react-datepicker';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
-import 'react-datepicker/dist/react-datepicker.css';
 
 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 { getFeatures } from 'soapbox/utils/features';
 
 const messages = defineMessages({
@@ -112,7 +112,8 @@ class BirthdayInput extends ImmutablePureComponent {
           </div>
         )}
         <div className='datepicker__input'>
-          <DatePicker
+          <BundleContainer fetchComponent={DatePicker}>
+            {Component => (<Component
               selected={value}
               wrapperClassName='react-datepicker-wrapper'
               onChange={onChange}
@@ -121,7 +122,8 @@ class BirthdayInput extends ImmutablePureComponent {
               maxDate={maxDate}
               required={required}
               renderCustomHeader={this.renderHeader}
-          />
+            />)}
+          </BundleContainer>
         </div>
       </div>
     );

app/soapbox/features/birthdays/date_picker.js

@@ -0,0 +1,4 @@
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+export default DatePicker;

app/soapbox/features/compose/components/schedule_form.js

@@ -3,12 +3,12 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import DatePicker from 'react-datepicker';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import 'react-datepicker/dist/react-datepicker.css';
 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 { setSchedule, removeSchedule } from '../../../actions/compose';
 
@@ -104,7 +104,8 @@ class ScheduleForm extends React.Component {
           <FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
         </div>
         <div className='datepicker__input'>
-          <DatePicker
+          <BundleContainer fetchComponent={DatePicker}>
+            {Component => (<Component
               selected={scheduledAt}
               showTimeSelect
               dateFormat='MMMM d, yyyy h:mm aa'
@@ -115,7 +116,8 @@ class ScheduleForm extends React.Component {
               filterDate={this.isCurrentOrFutureDate}
               filterTime={this.isFiveMinutesFromNow}
               ref={this.setRef}
-          />
+            />)}
+          </BundleContainer>
           <div className='datepicker__cancel'>
             <IconButton title={intl.formatMessage(messages.remove)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleRemove} />
           </div>

app/soapbox/features/ui/util/async-components.js

@@ -465,3 +465,7 @@ export function CreateApp() {
 export function SettingsStore() {
   return import(/* webpackChunkName: "features/developers" */'../../developers/settings_store');
 }
+
+export function DatePicker() {
+  return import(/* webpackChunkName: "date_picker" */'../../birthdays/date_picker');
+}