FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix auth screen bug

Browse Source
This commit is contained in:
denis0001-dev
2025-11-27 16:36:17 +03:00
Unverified
parent 807cbe88d2
commit 1aa5ca60db
1 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/auth/AuthPage.tsx
+15
View File
@@ -48,6 +48,7 @@ export default function AuthPage() {
const [containerHeight, setContainerHeight] = useState<number | "auto">("auto"); const [containerHeight, setContainerHeight] = useState<number | "auto">("auto");
const currentMode = searchParams.get("mode") || "login"; const currentMode = searchParams.get("mode") || "login";
const enteringElementRef = useRef<"login" | "register" | null>(null); const enteringElementRef = useRef<"login" | "register" | null>(null);
const [effectActivated, setEffectActivated] = useState(false);
useEffect(() => { useEffect(() => {
if (prevMode.current !== currentMode) { if (prevMode.current !== currentMode) {
@@ -68,6 +69,11 @@ export default function AuthPage() {
}, [currentMode, loginFormRef, registerFormRef]); }, [currentMode, loginFormRef, registerFormRef]);
useLayoutEffect(() => { useLayoutEffect(() => {
if (!effectActivated) {
setEffectActivated(true);
return;
}
// Always measure, but prioritize the entering element during transitions // Always measure, but prioritize the entering element during transitions
// Use double requestAnimationFrame to ensure DOM is fully updated and layout is complete // Use double requestAnimationFrame to ensure DOM is fully updated and layout is complete
let rafId2: number | null = null; let rafId2: number | null = null;
@@ -124,6 +130,12 @@ export default function AuthPage() {
height: containerHeight === "auto" ? "auto" : `${containerHeight}px`, height: containerHeight === "auto" ? "auto" : `${containerHeight}px`,
transition: "height 0.3s ease" transition: "height 0.3s ease"
}} }}
onAnimationStart={() => {
}}
onAnimationEnd={() => {
setContainerHeight("auto");
}}
> >
<AnimatePresence mode="sync" custom={direction}> <AnimatePresence mode="sync" custom={direction}>
{currentMode === "login" ? ( {currentMode === "login" ? (
@@ -138,6 +150,9 @@ export default function AuthPage() {
transition={slideTransition} transition={slideTransition}
onAnimationComplete={handleAnimationComplete("login", "login", enteringElementRef, loginFormRef, setContainerHeight)} onAnimationComplete={handleAnimationComplete("login", "login", enteringElementRef, loginFormRef, setContainerHeight)}
className={styles.formWrapper} className={styles.formWrapper}
style={{
position: containerHeight === "auto" ? "relative" : "absolute"
}}
> >
<LoginForm onSwitchMode={() => switchMode("register")} /> <LoginForm onSwitchMode={() => switchMode("register")} />
</motion.div> </motion.div>