From 7b7fbce4dffabebc54e192a752932be7698d672c Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Sun, 15 Dec 2024 16:50:28 +0200 Subject: [PATCH] web/mainscreen: add hack to skip transitions if browser provides them --- web/src/ui/MainScreen.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/web/src/ui/MainScreen.tsx b/web/src/ui/MainScreen.tsx index 63724c8..6a720b7 100644 --- a/web/src/ui/MainScreen.tsx +++ b/web/src/ui/MainScreen.tsx @@ -13,7 +13,7 @@ // // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { JSX, use, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useState } from "react" +import { JSX, use, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react" import { SyncLoader } from "react-spinners" import Client from "@/api/client.ts" import { RoomStateStore } from "@/api/statestore" @@ -221,7 +221,8 @@ const activeRoomReducer = (prev: ActiveRoomType, active: RoomStateStore | "clear } const MainScreen = () => { - const [[prevActiveRoom, activeRoom], directSetActiveRoom] = useReducer(activeRoomReducer, [null, null] as const) + const [[prevActiveRoom, activeRoom], directSetActiveRoom] = useReducer(activeRoomReducer, [null, null]) + const skipNextTransitionRef = useRef(false) const [rightPanel, directSetRightPanel] = useState(null) const client = use(ClientContext)! const syncStatus = useEventAsState(client.syncStatus) @@ -234,6 +235,7 @@ const MainScreen = () => { }, [context]) useEffect(() => { const listener = (evt: PopStateEvent) => { + skipNextTransitionRef.current = evt.hasUAVisualTransition const roomID = evt.state?.room_id ?? null if (roomID !== client.store.activeRoomID) { context.setActiveRoom(roomID, false) @@ -282,6 +284,10 @@ const MainScreen = () => { ["--room-list-width" as string]: `${roomListWidth}px`, ["--right-panel-width" as string]: `${rightPanelWidth}px`, } + if (skipNextTransitionRef.current) { + extraStyle["transition"] = "none" + skipNextTransitionRef.current = false + } const classNames = ["matrix-main"] if (activeRoom) { classNames.push("room-selected")