Added error, loading modal and popover components

• Added:
- error, loading modal components
- error, loading popover components

• Removed:
- ModalLoading from async_components

• Updated:
- ModalRoot to use new components

app/javascript/gabsocial/components/bundle_modal_error.js

@@ -1,51 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl';
-import Button from './button';
-
-const messages = defineMessages({
-  error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
-  retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
-  close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' },
-});
-
-export default
-@injectIntl
-class BundleModalError extends PureComponent {
-
-  static propTypes = {
-    onRetry: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  }
-
-  handleRetry = () => {
-    this.props.onRetry();
-  }
-
-  render () {
-    const { onClose, intl: { formatMessage } } = this.props;
-
-    // Keep the markup in sync with <ModalLoading />
-    // (make sure they have the same dimensions)
-    return (
-      <div className='modal-root__modal error-modal'>
-        <div className='error-modal__body'>
-          <Button title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
-          {formatMessage(messages.error)}
-        </div>
-
-        <div className='error-modal__footer'>
-          <div>
-            <button
-              onClick={onClose}
-              className='error-modal__nav onboarding-modal__skip'
-            >
-              {formatMessage(messages.close)}
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-

app/javascript/gabsocial/components/modal/bundle_error_modal.js

@@ -0,0 +1,39 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ConfirmationModal from './confirmation_modal'
+
+const messages = defineMessages({
+  error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
+  retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
+  title: { id: 'bundle_modal_error.error', defaultMessage: 'Error' },
+})
+
+export default
+@injectIntl
+class BundleErrorModal extends PureComponent {
+
+  static propTypes = {
+    onRetry: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  handleRetry = () => {
+    this.props.onRetry()
+  }
+
+  render () {
+    const { onClose, intl } = this.props
+
+    return (
+      <ConfirmationModal
+        title={intl.formatMessage(messages.title)}
+        message={intl.formatMessage(messages.error)}
+        confirm={intl.formatMessage(messages.retry)}
+        onConfirm={this.handleRetry}
+        onClose={onClose}
+      />
+    )
+  }
+
+}
+

app/javascript/gabsocial/components/modal/loading_modal.js

@@ -0,0 +1,22 @@
+import Block from '../block'
+import ColumnIndicator from '../column_indicator'
+
+export default class LoadingModal extends PureComponent {
+
+  render() {
+    return (
+      <div className={_s.width330PX}>
+        <Block>
+          <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+            <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+
+              <ColumnIndicator type='loading' />
+
+            </div>
+          </div>
+        </Block>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/modal_loading.js

@@ -1,20 +0,0 @@
-import ColumnIndicator from '../column_indicator';
-
-// Keep the markup in sync with <BundleModalError />
-// (make sure they have the same dimensions)
-export default class ModalLoading extends PureComponent {
-  render() {
-    return (
-      <div className='modal-root__modal error-modal'>
-        <div className='error-modal__body'>
-          <ColumnIndicator type='loading' />
-        </div>
-        <div className='error-modal__footer'>
-          <div>
-            <button className='error-modal__nav onboarding-modal__skip' />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

app/javascript/gabsocial/components/modal/modal_root.js

@@ -1,9 +1,9 @@
-import { Fragment } from 'react'
 import { closeModal } from '../../actions/modal'
 import { cancelReplyCompose } from '../../actions/compose'
 import Bundle from '../../features/ui/util/bundle'
 import ModalBase from './modal_base'
-import BundleModalError from '../bundle_modal_error'
+import BundleErrorModal from './bundle_error_modal'
+import LoadingModal from './loading_modal'
 import {
   MODAL_BLOCK_ACCOUNT,
   MODAL_BOOST,
@@ -152,11 +152,11 @@ class ModalRoot extends PureComponent {
   }
 
   renderLoading = () => {
-    return null
+    return <LoadingModal />
   }
 
   renderError = () => {
-    return <BundleModalError {...this.props} onClose={this.onClickClose} />
+    return <BundleErrorModal {...this.props} onClose={this.onClickClose} />
   }
 
   onClickClose = () => {
@@ -179,7 +179,7 @@ class ModalRoot extends PureComponent {
             fetchComponent={MODAL_COMPONENTS[type]}
             loading={this.renderLoading}
             error={this.renderError}
-            renderDelay={200}
+            renderDelay={150}
           >
             {
               (Component) => <Component {...props} onClose={this.onClickClose} />

app/javascript/gabsocial/components/popover/error_popover.js

@@ -0,0 +1,22 @@
+import Block from '../block'
+import ColumnIndicator from '../column_indicator'
+
+export default class ErrorPopover extends PureComponent {
+
+  render() {
+    return (
+      <div className={_s.width250PX}>
+        <Block>
+          <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+            <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+
+              <ColumnIndicator type='error' message='Error loading popover' />
+
+            </div>
+          </div>
+        </Block>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/popover/loading_popover.js

@@ -0,0 +1,22 @@
+import Block from '../block'
+import ColumnIndicator from '../column_indicator'
+
+export default class LoadingPopover extends PureComponent {
+
+  render() {
+    return (
+      <div className={_s.width250PX}>
+        <Block>
+          <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+            <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+
+              <ColumnIndicator type='loading' />
+
+            </div>
+          </div>
+        </Block>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/popover/popover_root.js

@@ -35,6 +35,8 @@ import { getWindowDimension } from '../../utils/is_mobile'
 import Bundle from '../../features/ui/util/bundle'
 import ModalBase from '../modal/modal_base'
 import PopoverBase from './popover_base'
+import ErrorPopover from './error_popover'
+import LoadingPopover from './loading_popover'
 
 const initialState = getWindowDimension()
 
@@ -102,8 +104,12 @@ class PopoverRoot extends PureComponent {
     this.setState({ width })
   }
 
-  renderEmpty = () => {
+  renderLoading = () => {
-    return <div />
+    return <LoadingPopover />
+  }
+
+  renderError = () => {
+    return <ErrorPopover />
   }
 
   render() {
@@ -130,9 +136,9 @@ class PopoverRoot extends PureComponent {
           visible &&
           <Bundle
             fetchComponent={POPOVER_COMPONENTS[type]}
-            loading={this.renderEmpty}
+            loading={this.renderLoading}
-            error={this.renderEmpty}
+            error={this.renderError}
-            renderDelay={200}
+            renderDelay={150}
           >
             {
               (Component) => <Component isXS={isXS} {...props} />

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -54,7 +54,6 @@ export function ListTimeline() { return import(/* webpackChunkName: "features/li
 export function ListTimelineSettingsModal() { return import(/* webpackChunkName: "components/list_timeline_settings_modal" */'../../../components/modal/list_timeline_settings_modal') }
 export function MediaGallery() { return import(/* webpackChunkName: "components/media_gallery" */'../../../components/media_gallery') }
 export function MediaModal() { return import(/* webpackChunkName: "components/media_modal" */'../../../components/modal/media_modal') }
-export function ModalLoading() { return import(/* webpackChunkName: "components/modal_loading" */'../../../components/modal/modal_loading') }
 export function Mutes() { return import(/* webpackChunkName: "features/mutes" */'../../mutes') }
 export function MuteModal() { return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal/mute_modal') }
 export function NavSettingsPopover() { return import(/* webpackChunkName: "modals/nav_settings_popover" */'../../../components/popover/nav_settings_popover') }