From a29019dbb004ad59ae328898c6b1fd25e372d413 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 9 Mar 2022 22:57:37 +0100
Subject: [PATCH] Load react-datepicker asynchronously
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/birthday_input.js      | 26 ++++++++--------
 app/soapbox/features/birthdays/date_picker.js |  4 +++
 .../compose/components/schedule_form.js       | 30 ++++++++++---------
 .../features/ui/util/async-components.js      |  4 +++
 4 files changed, 38 insertions(+), 26 deletions(-)
 create mode 100644 app/soapbox/features/birthdays/date_picker.js

diff --git a/app/soapbox/components/birthday_input.js b/app/soapbox/components/birthday_input.js
index 26131370b..912ba82fb 100644
--- a/app/soapbox/components/birthday_input.js
+++ b/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>
     );
diff --git a/app/soapbox/features/birthdays/date_picker.js b/app/soapbox/features/birthdays/date_picker.js
new file mode 100644
index 000000000..1944067d7
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/compose/components/schedule_form.js b/app/soapbox/features/compose/components/schedule_form.js
index a090abfb0..866b61429 100644
--- a/app/soapbox/features/compose/components/schedule_form.js
+++ b/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>
diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js
index 9c2218f8e..1622ca575 100644
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/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');
+}