Load react-datepicker asynchronously

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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,16 +112,18 @@ class BirthdayInput extends ImmutablePureComponent {
           </div>
         )}
         <div className='datepicker__input'>
-          <DatePicker
-            selected={value}
-            wrapperClassName='react-datepicker-wrapper'
-            onChange={onChange}
-            placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
-            minDate={new Date('1900-01-01')}
-            maxDate={maxDate}
-            required={required}
-            renderCustomHeader={this.renderHeader}
-          />
+          <BundleContainer fetchComponent={DatePicker}>
+            {Component => (<Component
+              selected={value}
+              wrapperClassName='react-datepicker-wrapper'
+              onChange={onChange}
+              placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
+              minDate={new Date('1900-01-01')}
+              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,18 +104,20 @@ class ScheduleForm extends React.Component {
           <FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
         </div>
         <div className='datepicker__input'>
-          <DatePicker
-            selected={scheduledAt}
-            showTimeSelect
-            dateFormat='MMMM d, yyyy h:mm aa'
-            timeIntervals={15}
-            wrapperClassName='react-datepicker-wrapper'
-            onChange={this.setSchedule}
-            placeholderText={this.props.intl.formatMessage(messages.schedule)}
-            filterDate={this.isCurrentOrFutureDate}
-            filterTime={this.isFiveMinutesFromNow}
-            ref={this.setRef}
-          />
+          <BundleContainer fetchComponent={DatePicker}>
+            {Component => (<Component
+              selected={scheduledAt}
+              showTimeSelect
+              dateFormat='MMMM d, yyyy h:mm aa'
+              timeIntervals={15}
+              wrapperClassName='react-datepicker-wrapper'
+              onChange={this.setSchedule}
+              placeholderText={this.props.intl.formatMessage(messages.schedule)}
+              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');
+}