[Glitch] Change design of modal loading and error screens in web UI

Port 7f2cfcc to glitch-soc

Signed-off-by: Claire <[email protected]>

app/javascript/flavours/glitch/components/gif.tsx

@@ -0,0 +1,22 @@
+import { useHovering } from '@/hooks/useHovering';
+import { autoPlayGif } from 'flavours/glitch/initial_state';
+
+export const GIF: React.FC<{
+  src: string;
+  staticSrc: string;
+  className: string;
+  animate?: boolean;
+}> = ({ src, staticSrc, className, animate = autoPlayGif }) => {
+  const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
+
+  return (
+    <img
+      className={className}
+      src={hovering || animate ? src : staticSrc}
+      alt=''
+      role='presentation'
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    />
+  );
+};

app/javascript/flavours/glitch/features/ui/components/bundle_column_error.jsx

@@ -9,58 +9,7 @@ import { Link } from 'react-router-dom';
 
 import { Button } from 'flavours/glitch/components/button';
 import Column from 'flavours/glitch/components/column';
-import { autoPlayGif } from 'flavours/glitch/initial_state';
-
-class GIF extends PureComponent {
-
-  static propTypes = {
-    src: PropTypes.string.isRequired,
-    staticSrc: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    animate: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    animate: autoPlayGif,
-  };
-
-  state = {
-    hovering: false,
-  };
-
-  handleMouseEnter = () => {
-    const { animate } = this.props;
-
-    if (!animate) {
-      this.setState({ hovering: true });
-    }
-  };
-
-  handleMouseLeave = () => {
-    const { animate } = this.props;
-
-    if (!animate) {
-      this.setState({ hovering: false });
-    }
-  };
-
-  render () {
-    const { src, staticSrc, className, animate } = this.props;
-    const { hovering } = this.state;
-
-    return (
-      <img
-        className={className}
-        src={(hovering || animate) ? src : staticSrc}
-        alt=''
-        role='presentation'
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-      />
-    );
-  }
-
-}
+import { GIF } from 'flavours/glitch/components/gif';
 
 class CopyButton extends PureComponent {
 

app/javascript/flavours/glitch/features/ui/components/modal_placeholder.tsx

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from 'flavours/glitch/components/button';
+import { GIF } from 'flavours/glitch/components/gif';
+import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
+
+export const ModalPlaceholder: React.FC<{
+  loading: boolean;
+  onClose: (arg0: string | undefined, arg1: boolean) => void;
+  onRetry?: () => void;
+}> = ({ loading, onClose, onRetry }) => {
+  const handleClose = useCallback(() => {
+    onClose(undefined, false);
+  }, [onClose]);
+
+  const handleRetry = useCallback(() => {
+    if (onRetry) onRetry();
+  }, [onRetry]);
+
+  return (
+    <div className='modal-root__modal modal-placeholder' aria-busy={loading}>
+      {loading ? (
+        <LoadingIndicator />
+      ) : (
+        <div className='modal-placeholder__error'>
+          <GIF
+            src='/oops.gif'
+            staticSrc='/oops.png'
+            className='modal-placeholder__error__image'
+          />
+
+          <div className='modal-placeholder__error__message'>
+            <p>
+              <FormattedMessage
+                id='bundle_modal_error.message'
+                defaultMessage='Something went wrong while loading this screen.'
+              />
+            </p>
+
+            <div className='modal-placeholder__error__message__actions'>
+              <Button onClick={handleRetry}>
+                <FormattedMessage
+                  id='bundle_modal_error.retry'
+                  defaultMessage='Try again'
+                />
+              </Button>
+              <Button onClick={handleClose} className='button button-tertiary'>
+                <FormattedMessage
+                  id='bundle_modal_error.close'
+                  defaultMessage='Close'
+                />
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

app/javascript/flavours/glitch/features/ui/components/modal_root.jsx

@@ -27,7 +27,6 @@ import BundleContainer from '../containers/bundle_container';
 import ActionsModal from './actions_modal';
 import AudioModal from './audio_modal';
 import { BoostModal } from './boost_modal';
-import BundleModalError from './bundle_modal_error';
 import {
   ConfirmationModal,
   ConfirmDeleteStatusModal,
@@ -44,7 +43,7 @@ import { FavouriteModal } from './favourite_modal';
 import FocalPointModal from './focal_point_modal';
 import ImageModal from './image_modal';
 import MediaModal from './media_modal';
-import ModalLoading from './modal_loading';
+import { ModalPlaceholder } from './modal_placeholder';
 import VideoModal from './video_modal';
 
 export const MODAL_COMPONENTS = {
@@ -109,14 +108,16 @@ export default class ModalRoot extends PureComponent {
     this.setState({ backgroundColor: color });
   };
 
-  renderLoading = modalId => () => {
-    return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
+  renderLoading = () => {
+    const { onClose } = this.props;
+
+    return <ModalPlaceholder loading onClose={onClose} />;
   };
 
   renderError = (props) => {
     const { onClose } = this.props;
 
-    return <BundleModalError {...props} onClose={onClose} />;
+    return <ModalPlaceholder {...props} onClose={onClose} />;
   };
 
   handleClose = (ignoreFocus = false) => {
@@ -141,7 +142,7 @@ export default class ModalRoot extends PureComponent {
       <Base backgroundColor={backgroundColor} onClose={props && props.noClose ? this.noop : this.handleClose} noEsc={props ? props.noEsc : false} ignoreFocus={ignoreFocus}>
         {visible && (
           <>
-            <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
+            <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>
               {(SpecificComponent) => {
                 const ref = typeof SpecificComponent !== 'function' ? this.setModalRef : undefined;
                 return <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={ref} />;