fix(frontend): switch to using Transition component for modals

This fixes the animation issue when opening Request modals

fixes #220

src/components/Common/Modal/index.tsx

@@ -1,12 +1,12 @@
 import React, { MouseEvent, ReactNode, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import Button, { ButtonType } from '../Button';
-import { useTransition, animated } from 'react-spring';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import LoadingSpinner from '../LoadingSpinner';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { useIntl } from 'react-intl';
 import globalMessages from '../../../i18n/globalMessages';
+import Transition from '../../Transition';
 
 interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string;
@@ -53,7 +53,6 @@ const Modal: React.FC<ModalProps> = ({
   tertiaryDisabled = false,
   tertiaryText,
   onTertiary,
-  ...props
 }) => {
   const intl = useIntl();
   const modalRef = useRef<HTMLDivElement>(null);
@@ -63,25 +62,13 @@ const Modal: React.FC<ModalProps> = ({
       : undefined;
   });
   useLockBodyScroll(true, disableScrollLock);
-  const containerTransitions = useTransition(!loading, null, {
-    from: { opacity: 0, transform: 'scale(0.5)' },
-    enter: { opacity: 1, transform: 'scale(1)' },
-    leave: { opacity: 0, transform: 'scale(0.5)' },
-    config: { tension: 500, velocity: 40, friction: 60 },
-  });
-  const loadingTransitions = useTransition(loading, null, {
-    from: { opacity: 0, transform: 'scale(0.5)' },
-    enter: { opacity: 1, transform: 'scale(1)' },
-    leave: { opacity: 0, transform: 'scale(0.5)' },
-    config: { tension: 500, velocity: 40, friction: 60 },
-  });
 
   return (
     <>
       {ReactDOM.createPortal(
-        <animated.div
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div
           className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
-          style={props.style}
           onKeyDown={(e) => {
             if (e.key === 'Escape') {
               typeof onCancel === 'function' && backgroundClickable
@@ -90,104 +77,111 @@ const Modal: React.FC<ModalProps> = ({
             }
           }}
         >
-          {loadingTransitions.map(
+          <Transition
-            ({ props, item, key }) =>
+            enter="transition opacity-0 duration-300 transform scale-75"
-              item && (
+            enterFrom="opacity-0 scale-75"
-                <animated.div
+            enterTo="opacity-100 scale-100"
-                  style={{ ...props, position: 'absolute' }}
+            leave="transition opacity-100 duration-300"
-                  key={key}
+            leaveFrom="opacity-100"
-                >
+            leaveTo="opacity-0"
-                  <LoadingSpinner />
+            appear
-                </animated.div>
+            show={loading}
-              )
+          >
-          )}
+            <div style={{ position: 'absolute' }}>
-          {containerTransitions.map(
+              <LoadingSpinner />
-            ({ props, item, key }) =>
+            </div>
-              item && (
+          </Transition>
-                <animated.div
+          <Transition
-                  style={props}
+            enter="transition opacity-0 duration-300 transform scale-75"
-                  className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
+            enterFrom="opacity-0 scale-75"
-                  role="dialog"
+            enterTo="opacity-100 scale-100"
-                  aria-modal="true"
+            leave="transition opacity-100 duration-300"
-                  aria-labelledby="modal-headline"
+            leaveFrom="opacity-100"
-                  key={key}
+            leaveTo="opacity-0"
-                  ref={modalRef}
+            appear
-                >
+            show={!loading}
-                  <div className="sm:flex sm:items-center">
+          >
-                    {iconSvg && (
+            <div
-                      <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
+              className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
-                        {iconSvg}
+              role="dialog"
-                      </div>
+              aria-modal="true"
-                    )}
+              aria-labelledby="modal-headline"
-                    <div
+              ref={modalRef}
-                      className={`mt-3 text-center sm:mt-0 sm:text-left ${
+            >
-                        iconSvg ? 'sm:ml-4' : 'mb-6'
+              <div className="sm:flex sm:items-center">
-                      }`}
+                {iconSvg && (
-                    >
+                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
-                      {title && (
+                    {iconSvg}
-                        <h3
-                          className="text-lg leading-6 font-medium text-white"
-                          id="modal-headline"
-                        >
-                          {title}
-                        </h3>
-                      )}
-                    </div>
                   </div>
-                  {children && (
+                )}
-                    <div className="mt-4 text-sm leading-5 text-gray-300">
+                <div
-                      {children}
+                  className={`mt-3 text-center sm:mt-0 sm:text-left ${
-                    </div>
+                    iconSvg ? 'sm:ml-4' : 'mb-6'
+                  }`}
+                >
+                  {title && (
+                    <h3
+                      className="text-lg leading-6 font-medium text-white"
+                      id="modal-headline"
+                    >
+                      {title}
+                    </h3>
                   )}
-                  {(onCancel || onOk || onSecondary || onTertiary) && (
+                </div>
-                    <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
+              </div>
-                      {typeof onOk === 'function' && (
+              {children && (
-                        <Button
+                <div className="mt-4 text-sm leading-5 text-gray-300">
-                          buttonType={okButtonType}
+                  {children}
-                          onClick={onOk}
+                </div>
-                          className="ml-3"
+              )}
-                          disabled={okDisabled}
+              {(onCancel || onOk || onSecondary || onTertiary) && (
-                        >
+                <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
-                          {okText ? okText : 'Ok'}
+                  {typeof onOk === 'function' && (
-                        </Button>
+                    <Button
-                      )}
+                      buttonType={okButtonType}
-                      {typeof onSecondary === 'function' && secondaryText && (
+                      onClick={onOk}
-                        <Button
+                      className="ml-3"
-                          buttonType={secondaryButtonType}
+                      disabled={okDisabled}
-                          onClick={onSecondary}
+                    >
-                          className="ml-3"
+                      {okText ? okText : 'Ok'}
-                          disabled={secondaryDisabled}
+                    </Button>
-                        >
-                          {secondaryText}
-                        </Button>
-                      )}
-                      {typeof onTertiary === 'function' && tertiaryText && (
-                        <Button
-                          buttonType={tertiaryButtonType}
-                          onClick={onTertiary}
-                          className="ml-3"
-                          disabled={tertiaryDisabled}
-                        >
-                          {tertiaryText}
-                        </Button>
-                      )}
-                      {typeof onCancel === 'function' && (
-                        <Button
-                          buttonType={cancelButtonType}
-                          onClick={onCancel}
-                          className="ml-3 sm:ml-0 sm:px-4"
-                        >
-                          {cancelText
-                            ? cancelText
-                            : intl.formatMessage(globalMessages.cancel)}
-                        </Button>
-                      )}
-                    </div>
                   )}
-                </animated.div>
+                  {typeof onSecondary === 'function' && secondaryText && (
-              )
+                    <Button
-          )}
+                      buttonType={secondaryButtonType}
-        </animated.div>,
+                      onClick={onSecondary}
+                      className="ml-3"
+                      disabled={secondaryDisabled}
+                    >
+                      {secondaryText}
+                    </Button>
+                  )}
+                  {typeof onTertiary === 'function' && tertiaryText && (
+                    <Button
+                      buttonType={tertiaryButtonType}
+                      onClick={onTertiary}
+                      className="ml-3"
+                      disabled={tertiaryDisabled}
+                    >
+                      {tertiaryText}
+                    </Button>
+                  )}
+                  {typeof onCancel === 'function' && (
+                    <Button
+                      buttonType={cancelButtonType}
+                      onClick={onCancel}
+                      className="ml-3 sm:ml-0 sm:px-4"
+                    >
+                      {cancelText
+                        ? cancelText
+                        : intl.formatMessage(globalMessages.cancel)}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </div>
+          </Transition>
+        </div>,
         document.body
       )}
     </>

src/components/RequestModal/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import MovieRequestModal from './MovieRequestModal';
 import type { MediaStatus } from '../../../server/constants/media';
 import TvRequestModal from './TvRequestModal';
-import { useTransition } from 'react-spring';
+import Transition from '../Transition';
 
 interface RequestModalProps {
   show: boolean;
@@ -22,49 +22,46 @@ const RequestModal: React.FC<RequestModalProps> = ({
   onUpdating,
   onCancel,
 }) => {
-  const transitions = useTransition(show, null, {
-    from: { opacity: 0, backdropFilter: 'blur(0px)' },
-    enter: { opacity: 1, backdropFilter: 'blur(3px)' },
-    leave: { opacity: 0, backdropFilter: 'blur(0px)' },
-    config: { tension: 500, velocity: 40, friction: 60 },
-  });
-
   if (type === 'tv') {
     return (
-      <>
+      <Transition
-        {transitions.map(
+        enter="opacity-0"
-          ({ props, item, key }) =>
+        enterFrom="opacity-0"
-            item && (
+        enterTo="opacity-100"
-              <TvRequestModal
+        leave="opacity-100"
-                onComplete={onComplete}
+        leaveFrom="opacity-100"
-                onCancel={onCancel}
+        leaveTo="opacity-0"
-                tmdbId={tmdbId}
+        appear
-                onUpdating={onUpdating}
+        show={show}
-                style={props}
+      >
-                key={key}
+        <TvRequestModal
-              />
+          onComplete={onComplete}
-            )
+          onCancel={onCancel}
-        )}
+          tmdbId={tmdbId}
-      </>
+          onUpdating={onUpdating}
+        />
+      </Transition>
     );
   }
 
   return (
-    <>
+    <Transition
-      {transitions.map(
+      enter="opacity-0"
-        ({ props, item, key }) =>
+      enterFrom="opacity-0"
-          item && (
+      enterTo="opacity-100"
-            <MovieRequestModal
+      leave="opacity-100"
-              onComplete={onComplete}
+      leaveFrom="opacity-100"
-              onCancel={onCancel}
+      leaveTo="opacity-0"
-              tmdbId={tmdbId}
+      appear
-              onUpdating={onUpdating}
+      show={show}
-              style={props}
+    >
-              key={key}
+      <MovieRequestModal
-            />
+        onComplete={onComplete}
-          )
+        onCancel={onCancel}
-      )}
+        tmdbId={tmdbId}
-    </>
+        onUpdating={onUpdating}
+      />
+    </Transition>
   );
 };