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,27 +77,35 @@ const Modal: React.FC<ModalProps> = ({
             }
           }}
         >
-          {loadingTransitions.map(
-            ({ props, item, key }) =>
-              item && (
-                <animated.div
-                  style={{ ...props, position: 'absolute' }}
-                  key={key}
+          <Transition
+            enter="transition opacity-0 duration-300 transform scale-75"
+            enterFrom="opacity-0 scale-75"
+            enterTo="opacity-100 scale-100"
+            leave="transition opacity-100 duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            appear
+            show={loading}
           >
+            <div style={{ position: 'absolute' }}>
               <LoadingSpinner />
-                </animated.div>
-              )
-          )}
-          {containerTransitions.map(
-            ({ props, item, key }) =>
-              item && (
-                <animated.div
-                  style={props}
+            </div>
+          </Transition>
+          <Transition
+            enter="transition opacity-0 duration-300 transform scale-75"
+            enterFrom="opacity-0 scale-75"
+            enterTo="opacity-100 scale-100"
+            leave="transition opacity-100 duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            appear
+            show={!loading}
+          >
+            <div
               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"
               role="dialog"
               aria-modal="true"
               aria-labelledby="modal-headline"
-                  key={key}
               ref={modalRef}
             >
               <div className="sm:flex sm:items-center">
@@ -184,10 +179,9 @@ const Modal: React.FC<ModalProps> = ({
                   )}
                 </div>
               )}
-                </animated.div>
-              )
-          )}
-        </animated.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 (
-      <>
-        {transitions.map(
-          ({ props, item, key }) =>
-            item && (
+      <Transition
+        enter="opacity-0"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="opacity-100"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        appear
+        show={show}
+      >
         <TvRequestModal
           onComplete={onComplete}
           onCancel={onCancel}
           tmdbId={tmdbId}
           onUpdating={onUpdating}
-                style={props}
-                key={key}
         />
-            )
-        )}
-      </>
+      </Transition>
     );
   }
 
   return (
-    <>
-      {transitions.map(
-        ({ props, item, key }) =>
-          item && (
+    <Transition
+      enter="opacity-0"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="opacity-100"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      appear
+      show={show}
+    >
       <MovieRequestModal
         onComplete={onComplete}
         onCancel={onCancel}
         tmdbId={tmdbId}
         onUpdating={onUpdating}
-              style={props}
-              key={key}
       />
-          )
-      )}
-    </>
+    </Transition>
   );
 };