fix: transition animation (#2974)

switched to using headlessui transition instead of react-css-transition due to new version breaking the
animation

package.json

@@ -77,7 +77,6 @@
     "react-select": "5.4.0",
     "react-spring": "9.5.2",
     "react-toast-notifications": "2.5.1",
-    "react-transition-group": "4.4.5",
     "react-truncate-markup": "5.1.2",
     "react-use-clipboard": "1.0.8",
     "reflect-metadata": "0.1.13",

src/components/Common/ButtonWithDropdown/index.tsx

@@ -1,9 +1,9 @@
-import Transition from '@app/components/Transition';
 import useClickOutside from '@app/hooks/useClickOutside';
 import { withProperties } from '@app/utils/typeHelpers';
+import { Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/solid';
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
-import { useRef, useState } from 'react';
+import { Fragment, useRef, useState } from 'react';
 
 interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   buttonType?: 'primary' | 'ghost';
@@ -99,6 +99,7 @@ const ButtonWithDropdown = ({
             {dropdownIcon ? dropdownIcon : <ChevronDownIcon />}
           </button>
           <Transition
+            as={Fragment}
             show={isOpen}
             enter="transition ease-out duration-100 opacity-0"
             enterFrom="transform opacity-0 scale-95"

src/components/Common/Modal/index.tsx

@@ -2,12 +2,12 @@ import type { ButtonType } from '@app/components/Common/Button';
 import Button from '@app/components/Common/Button';
 import CachedImage from '@app/components/Common/CachedImage';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
-import Transition from '@app/components/Transition';
 import useClickOutside from '@app/hooks/useClickOutside';
 import { useLockBodyScroll } from '@app/hooks/useLockBodyScroll';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import type { MouseEvent } from 'react';
-import { useRef } from 'react';
+import { Fragment, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { useIntl } from 'react-intl';
 
@@ -49,7 +49,6 @@ const Modal = ({
   disableScrollLock,
   backgroundClickable = true,
   iconSvg,
-  loading = false,
   secondaryButtonType = 'default',
   secondaryDisabled = false,
   onSecondary,
@@ -81,27 +80,27 @@ const Modal = ({
         }
       }}
     >
-      <Transition
+      <Transition.Child
+        as={Fragment}
         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"
-        show={loading}
       >
         <div style={{ position: 'absolute' }}>
           <LoadingSpinner />
         </div>
-      </Transition>
+      </Transition.Child>
-      <Transition
+      <Transition.Child
+        as={Fragment}
         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"
-        show={!loading}
       >
         <div
           className="relative inline-block w-full transform overflow-auto bg-gray-700 px-4 pt-5 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-500 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle"
@@ -207,7 +206,7 @@ const Modal = ({
             </div>
           )}
         </div>
-      </Transition>
+      </Transition.Child>
     </div>,
     document.body
   );

src/components/IssueDetails/IssueComment/index.tsx

@@ -1,15 +1,14 @@
 import Button from '@app/components/Common/Button';
 import Modal from '@app/components/Common/Modal';
-import Transition from '@app/components/Transition';
 import { Permission, useUser } from '@app/hooks/useUser';
-import { Menu } from '@headlessui/react';
+import { Menu, Transition } from '@headlessui/react';
 import { ExclamationIcon } from '@heroicons/react/outline';
 import { DotsVerticalIcon } from '@heroicons/react/solid';
 import type { default as IssueCommentType } from '@server/entity/IssueComment';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import ReactMarkdown from 'react-markdown';
 import * as Yup from 'yup';
@@ -66,6 +65,7 @@ const IssueComment = ({
       } mt-4 space-x-4`}
     >
       <Transition
+        as={Fragment}
         enter="transition opacity-0 duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
@@ -114,6 +114,7 @@ const IssueComment = ({
                   </div>
 
                   <Transition
+                    as={Fragment}
                     show={open}
                     enter="transition ease-out duration-100"
                     enterFrom="transform opacity-0 scale-95"

src/components/IssueDetails/index.tsx

@@ -7,10 +7,10 @@ import PageTitle from '@app/components/Common/PageTitle';
 import IssueComment from '@app/components/IssueDetails/IssueComment';
 import IssueDescription from '@app/components/IssueDetails/IssueDescription';
 import { issueOptions } from '@app/components/IssueModal/constants';
-import Transition from '@app/components/Transition';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
+import { Transition } from '@headlessui/react';
 import {
   ChatIcon,
   CheckCircleIcon,
@@ -28,7 +28,7 @@ import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
@@ -174,6 +174,7 @@ const IssueDetails = () => {
     >
       <PageTitle title={[intl.formatMessage(messages.issuepagetitle), title]} />
       <Transition
+        as={Fragment}
         enter="transition opacity-0 duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/IssueModal/index.tsx

@@ -1,5 +1,5 @@
 import CreateIssueModal from '@app/components/IssueModal/CreateIssueModal';
-import Transition from '@app/components/Transition';
+import { Transition } from '@headlessui/react';
 
 interface IssueModalProps {
   show?: boolean;
@@ -11,6 +11,7 @@ interface IssueModalProps {
 
 const IssueModal = ({ show, mediaType, onCancel, tmdbId }: IssueModalProps) => (
   <Transition
+    as="div"
     enter="transition opacity-0 duration-300"
     enterFrom="opacity-0"
     enterTo="opacity-100"

src/components/Layout/LanguagePicker/index.tsx

@@ -1,10 +1,10 @@
-import Transition from '@app/components/Transition';
 import type { AvailableLocale } from '@app/context/LanguageContext';
 import { availableLanguages } from '@app/context/LanguageContext';
 import useClickOutside from '@app/hooks/useClickOutside';
 import useLocale from '@app/hooks/useLocale';
+import { Transition } from '@headlessui/react';
 import { TranslateIcon } from '@heroicons/react/solid';
-import { useRef, useState } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -32,6 +32,7 @@ const LanguagePicker = () => {
         </button>
       </div>
       <Transition
+        as={Fragment}
         show={isDropdownOpen}
         enter="transition ease-out duration-100 opacity-0"
         enterFrom="transform opacity-0 scale-95"

src/components/Layout/Sidebar/index.tsx

@@ -1,7 +1,7 @@
 import VersionStatus from '@app/components/Layout/VersionStatus';
-import Transition from '@app/components/Transition';
 import useClickOutside from '@app/hooks/useClickOutside';
 import { Permission, useUser } from '@app/hooks/useUser';
+import { Transition } from '@headlessui/react';
 import {
   ClockIcon,
   CogIcon,
@@ -12,7 +12,7 @@ import {
 } from '@heroicons/react/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useRef } from 'react';
+import { Fragment, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -94,9 +94,10 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
   return (
     <>
       <div className="lg:hidden">
-        <Transition show={open}>
+        <Transition as={Fragment} show={open}>
           <div className="fixed inset-0 z-40 flex">
-            <Transition
+            <Transition.Child
+              as="div"
               enter="transition-opacity ease-linear duration-300"
               enterFrom="opacity-0"
               enterTo="opacity-100"
@@ -107,8 +108,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
               <div className="fixed inset-0">
                 <div className="absolute inset-0 bg-gray-900 opacity-90"></div>
               </div>
-            </Transition>
+            </Transition.Child>
-            <Transition
+            <Transition.Child
+              as="div"
               enter="transition ease-in-out duration-300 transform"
               enterFrom="-translate-x-full"
               enterTo="translate-x-0"
@@ -117,7 +119,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
               leaveTo="-translate-x-full"
             >
               <>
-                <div className="sidebar relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
+                <div className="sidebar relative flex h-full w-full max-w-xs flex-1 flex-col bg-gray-800">
                   <div className="sidebar-close-button absolute top-0 right-0 -mr-14 p-1">
                     <button
                       className="flex h-12 w-12 items-center justify-center rounded-full focus:bg-gray-600 focus:outline-none"
@@ -129,7 +131,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                   </div>
                   <div
                     ref={navRef}
-                    className="flex h-0 flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
+                    className="flex flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
                   >
                     <div className="flex flex-shrink-0 items-center px-2">
                       <span className="px-4 text-xl text-gray-50">
@@ -192,7 +194,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                   {/* <!-- Force sidebar to shrink to fit close icon --> */}
                 </div>
               </>
-            </Transition>
+            </Transition.Child>
           </div>
         </Transition>
       </div>

src/components/Login/index.tsx

@@ -4,13 +4,13 @@ import PageTitle from '@app/components/Common/PageTitle';
 import LanguagePicker from '@app/components/Layout/LanguagePicker';
 import LocalLogin from '@app/components/Login/LocalLogin';
 import PlexLoginButton from '@app/components/PlexLoginButton';
-import Transition from '@app/components/Transition';
 import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
+import { Transition } from '@headlessui/react';
 import { XCircleIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 
@@ -93,6 +93,7 @@ const Login = () => {
         >
           <>
             <Transition
+              as={Fragment}
               show={!!error}
               enter="opacity-0 transition duration-300"
               enterFrom="opacity-0"

src/components/RequestModal/index.tsx

@@ -1,7 +1,7 @@
 import CollectionRequestModal from '@app/components/RequestModal/CollectionRequestModal';
 import MovieRequestModal from '@app/components/RequestModal/MovieRequestModal';
 import TvRequestModal from '@app/components/RequestModal/TvRequestModal';
-import Transition from '@app/components/Transition';
+import { Transition } from '@headlessui/react';
 import type { MediaStatus } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
 
@@ -28,6 +28,7 @@ const RequestModal = ({
 }: RequestModalProps) => {
   return (
     <Transition
+      as="div"
       enter="transition opacity-0 duration-300"
       enterFrom="opacity-0"
       enterTo="opacity-100"

src/components/Settings/RadarrModal/index.tsx

@@ -1,7 +1,7 @@
 import Modal from '@app/components/Common/Modal';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
-import Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { PencilIcon, PlusIcon } from '@heroicons/react/solid';
 import type { RadarrSettings } from '@server/lib/settings';
 import axios from 'axios';
@@ -212,6 +212,7 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
 
   return (
     <Transition
+      as="div"
       appear
       show
       enter="transition ease-in-out duration-300 transform opacity-0"

src/components/Settings/SettingsAbout/Releases/index.tsx

@@ -2,8 +2,8 @@ import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import Modal from '@app/components/Common/Modal';
-import Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { DocumentTextIcon } from '@heroicons/react/outline';
 import { useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
@@ -55,6 +55,7 @@ const Release = ({ currentVersion, release, isLatest }: ReleaseProps) => {
   return (
     <div className="flex w-full flex-col space-y-3 rounded-md bg-gray-800 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-y-0 sm:space-x-3">
       <Transition
+        as="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/Settings/SettingsJobsCache/index.tsx

@@ -5,9 +5,9 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import Modal from '@app/components/Common/Modal';
 import PageTitle from '@app/components/Common/PageTitle';
 import Table from '@app/components/Common/Table';
-import Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
 import { formatBytes } from '@app/utils/numberHelpers';
+import { Transition } from '@headlessui/react';
 import { PlayIcon, StopIcon, TrashIcon } from '@heroicons/react/outline';
 import { PencilIcon } from '@heroicons/react/solid';
 import type { CacheItem } from '@server/interfaces/api/settingsInterfaces';
@@ -187,6 +187,7 @@ const SettingsJobs = () => {
         ]}
       />
       <Transition
+        as="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/Settings/SettingsLogs/index.tsx

@@ -5,10 +5,10 @@ import Modal from '@app/components/Common/Modal';
 import PageTitle from '@app/components/Common/PageTitle';
 import Table from '@app/components/Common/Table';
 import Tooltip from '@app/components/Common/Tooltip';
-import Transition from '@app/components/Transition';
 import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
+import { Transition } from '@headlessui/react';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -135,6 +135,7 @@ const SettingsLogs = () => {
         ]}
       />
       <Transition
+        as="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/Settings/SettingsServices.tsx

@@ -8,12 +8,12 @@ import Modal from '@app/components/Common/Modal';
 import PageTitle from '@app/components/Common/PageTitle';
 import RadarrModal from '@app/components/Settings/RadarrModal';
 import SonarrModal from '@app/components/Settings/SonarrModal';
-import Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/solid';
 import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 import axios from 'axios';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR, { mutate } from 'swr';
 
@@ -245,6 +245,7 @@ const SettingsServices = () => {
         />
       )}
       <Transition
+        as={Fragment}
         show={deleteServerModal.open}
         enter="transition ease-in-out duration-300 transform opacity-0"
         enterFrom="opacity-0"

src/components/Settings/SonarrModal/index.tsx

@@ -1,7 +1,7 @@
 import Modal from '@app/components/Common/Modal';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
-import Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { PencilIcon, PlusIcon } from '@heroicons/react/solid';
 import type { SonarrSettings } from '@server/lib/settings';
 import axios from 'axios';
@@ -221,6 +221,7 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
 
   return (
     <Transition
+      as="div"
       appear
       show
       enter="transition ease-in-out duration-300 transform opacity-0"

src/components/StatusChecker/index.tsx

@@ -1,8 +1,8 @@
 import Modal from '@app/components/Common/Modal';
-import Transition from '@app/components/Transition';
 import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { RefreshIcon, SparklesIcon } from '@heroicons/react/outline';
 import type { StatusResponse } from '@server/interfaces/api/settingsInterfaces';
 import { useEffect, useState } from 'react';
@@ -44,6 +44,7 @@ const StatusChecker = () => {
 
   return (
     <Transition
+      as="div"
       enter="opacity-0 transition duration-300"
       enterFrom="opacity-0"
       enterTo="opacity-100"

src/components/TitleCard/index.tsx

@@ -4,17 +4,17 @@ import CachedImage from '@app/components/Common/CachedImage';
 import RequestModal from '@app/components/RequestModal';
 import ErrorCard from '@app/components/TitleCard/ErrorCard';
 import Placeholder from '@app/components/TitleCard/Placeholder';
-import Transition from '@app/components/Transition';
 import { useIsTouch } from '@app/hooks/useIsTouch';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { withProperties } from '@app/utils/typeHelpers';
+import { Transition } from '@headlessui/react';
 import { DownloadIcon } from '@heroicons/react/outline';
 import { BellIcon, CheckIcon, ClockIcon } from '@heroicons/react/solid';
 import { MediaStatus } from '@server/constants/media';
 import type { MediaType } from '@server/models/Search';
 import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
+import { Fragment, useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 interface TitleCardProps {
@@ -163,6 +163,7 @@ const TitleCard = ({
             </div>
           </div>
           <Transition
+            as={Fragment}
             show={isUpdating}
             enter="transition ease-in-out duration-300 transform opacity-0"
             enterFrom="opacity-0"
@@ -177,6 +178,7 @@ const TitleCard = ({
           </Transition>
 
           <Transition
+            as={Fragment}
             show={!image || showDetail || showRequestModal}
             enter="transition transform opacity-0"
             enterFrom="opacity-0"

src/components/Toast/index.tsx

@@ -1,4 +1,4 @@
-import Transition from '@app/components/Transition';
+import { Transition } from '@headlessui/react';
 import {
   CheckCircleIcon,
   ExclamationCircleIcon,
@@ -6,6 +6,7 @@ import {
   InformationCircleIcon,
 } from '@heroicons/react/outline';
 import { XIcon } from '@heroicons/react/solid';
+import { Fragment } from 'react';
 import type { ToastProps } from 'react-toast-notifications';
 
 const Toast = ({
@@ -17,6 +18,7 @@ const Toast = ({
   return (
     <div className="toast pointer-events-none flex max-w-full items-end justify-center px-2 py-2 sm:items-start sm:justify-end">
       <Transition
+        as={Fragment}
         show={transitionState === 'entered'}
         enter="transition duration-300 transform-gpu"
         enterFrom="opacity-0 scale-95"

src/components/Transition/index.tsx

@@ -1,120 +0,0 @@
-import React, { useContext, useEffect, useRef } from 'react';
-import { CSSTransition as ReactCSSTransition } from 'react-transition-group';
-
-interface CSSTransitionProps {
-  show?: boolean;
-  enter?: string;
-  enterFrom?: string;
-  enterTo?: string;
-  leave?: string;
-  leaveFrom?: string;
-  leaveTo?: string;
-  appear?: boolean;
-  children?: React.ReactNode;
-}
-
-const TransitionContext = React.createContext<{
-  parent: { show?: boolean; isInitialRender?: boolean; appear?: boolean };
-}>({
-  parent: {},
-});
-
-function useIsInitialRender() {
-  const isInitialRender = useRef(true);
-  useEffect(() => {
-    isInitialRender.current = false;
-  }, []);
-  return isInitialRender.current;
-}
-
-const CSSTransition = ({
-  show,
-  enter = '',
-  enterFrom = '',
-  enterTo = '',
-  leave = '',
-  leaveFrom = '',
-  leaveTo = '',
-  appear,
-  children,
-}: CSSTransitionProps) => {
-  const enterClasses = enter.split(' ').filter((s) => s.length);
-  const enterFromClasses = enterFrom.split(' ').filter((s) => s.length);
-  const enterToClasses = enterTo.split(' ').filter((s) => s.length);
-  const leaveClasses = leave.split(' ').filter((s) => s.length);
-  const leaveFromClasses = leaveFrom.split(' ').filter((s) => s.length);
-  const leaveToClasses = leaveTo.split(' ').filter((s) => s.length);
-
-  const addClasses = (node: HTMLElement, classes: string[]) => {
-    classes.length && node.classList.add(...classes);
-  };
-
-  const removeClasses = (node: HTMLElement, classes: string[]) => {
-    classes.length && node.classList.remove(...classes);
-  };
-
-  return (
-    <ReactCSSTransition
-      appear={appear}
-      unmountOnExit
-      in={show}
-      addEndListener={(node, done) => {
-        node.addEventListener('transitionend', done, false);
-      }}
-      onEnter={(node: HTMLElement) => {
-        addClasses(node, [...enterClasses, ...enterFromClasses]);
-      }}
-      onEntering={(node: HTMLElement) => {
-        removeClasses(node, enterFromClasses);
-        addClasses(node, enterToClasses);
-      }}
-      onEntered={(node: HTMLElement) => {
-        removeClasses(node, [...enterToClasses, ...enterClasses]);
-      }}
-      onExit={(node) => {
-        addClasses(node, [...leaveClasses, ...leaveFromClasses]);
-      }}
-      onExiting={(node) => {
-        removeClasses(node, leaveFromClasses);
-        addClasses(node, leaveToClasses);
-      }}
-      onExited={(node) => {
-        removeClasses(node, [...leaveToClasses, ...leaveClasses]);
-      }}
-    >
-      {children}
-    </ReactCSSTransition>
-  );
-};
-
-const Transition = ({ show, appear, ...rest }: CSSTransitionProps) => {
-  const { parent } = useContext(TransitionContext);
-  const isInitialRender = useIsInitialRender();
-  const isChild = show === undefined;
-
-  if (isChild) {
-    return (
-      <CSSTransition
-        appear={parent.appear || !parent.isInitialRender}
-        show={parent.show}
-        {...rest}
-      />
-    );
-  }
-
-  return (
-    <TransitionContext.Provider
-      value={{
-        parent: {
-          show,
-          isInitialRender,
-          appear,
-        },
-      }}
-    >
-      <CSSTransition appear={appear} show={show} {...rest} />
-    </TransitionContext.Provider>
-  );
-};
-
-export default Transition;

src/components/UserList/index.tsx

@@ -7,7 +7,6 @@ import Modal from '@app/components/Common/Modal';
 import PageTitle from '@app/components/Common/PageTitle';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
 import Table from '@app/components/Common/Table';
-import Transition from '@app/components/Transition';
 import BulkEditModal from '@app/components/UserList/BulkEditModal';
 import PlexImportModal from '@app/components/UserList/PlexImportModal';
 import useSettings from '@app/hooks/useSettings';
@@ -15,6 +14,7 @@ import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import type { User } from '@app/hooks/useUser';
 import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { TrashIcon } from '@heroicons/react/outline';
 import {
   ChevronLeftIcon,
@@ -228,6 +228,7 @@ const UserList = () => {
     <>
       <PageTitle title={intl.formatMessage(messages.users)} />
       <Transition
+        as="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
@@ -256,6 +257,7 @@ const UserList = () => {
       </Transition>
 
       <Transition
+        as="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
@@ -439,6 +441,7 @@ const UserList = () => {
       </Transition>
 
       <Transition
+        as="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
@@ -459,6 +462,7 @@ const UserList = () => {
       </Transition>
 
       <Transition
+        as="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

yarn.lock

@@ -10389,16 +10389,6 @@ react-toast-notifications@2.5.1:
     "@emotion/core" "^10.0.14"
     react-transition-group "^4.4.1"
 
-react-transition-group@4.4.5:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
-  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react-transition-group@^4.3.0, react-transition-group@^4.4.1:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"