fix: remove smoother

src/components/profile/profile-new.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useLockFn, useSetState } from "ahooks";
 import {
   Button,
+  Collapse,
   Dialog,
   DialogActions,
   DialogContent,
@@ -21,7 +22,6 @@ import { Settings } from "@mui/icons-material";
 import { createProfile } from "@/services/cmds";
 import Notice from "../base/base-notice";
 import FileInput from "./file-input";
-import { Smoother } from "./smoother";
 
 interface Props {
   open: boolean;
@@ -94,7 +94,6 @@ const ProfileNew = (props: Props) => {
       <DialogTitle sx={{ pb: 0.5 }}>{t("Create Profile")}</DialogTitle>
 
       <DialogContent sx={{ width: 336, pb: 1 }}>
-        <Smoother>
         <FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}>
           <InputLabel>Type</InputLabel>
           <Select
@@ -140,8 +139,11 @@ const ProfileNew = (props: Props) => {
           <FileInput onChange={(val) => (fileDataRef.current = val)} />
         )}
 
-          {form.type === "remote" && showOpt && (
-            <>
+        <Collapse
+          in={form.type === "remote" && showOpt}
+          timeout="auto"
+          unmountOnExit
+        >
           <TextField
             {...textFieldProps}
             label="User Agent"
@@ -183,9 +185,7 @@ const ProfileNew = (props: Props) => {
               />
             }
           />
-            </>
-          )}
-        </Smoother>
+        </Collapse>
       </DialogContent>
 
       <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>

src/components/profile/smoother.tsx

@@ -1,30 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export const Smoother: React.FC = ({ children }) => {
-  const self = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (typeof window.getComputedStyle == "undefined") return;
-    const element = self.current;
-    if (!element) return;
-    var height = window.getComputedStyle(element).height;
-    element.style.transition = "none";
-    element.style.height = "auto";
-    var targetHeight = window.getComputedStyle(element).height;
-    element.style.height = height;
-
-    setTimeout(() => {
-      element.style.transition = "height .5s";
-      element.style.height = targetHeight;
-    }, 0);
-  });
-  return (
-    <div
-      ref={self}
-      style={{
-        overflowY: "hidden",
-      }}
-    >
-      {children}
-    </div>
-  );
-};