fix: gate room rendering on timeline readiness (Continuwuity #779)

Author: Aleksey

src/app/components/RoomLoading.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Box, Spinner, Text } from 'folds';
+
+export function RoomLoading() {
+  return (
+    <Box
+      grow="Yes"
+      alignItems="Center"
+      justifyContent="Center"
+      gap="300"
+      direction="Column"
+    >
+      <Spinner variant="Secondary" size="600" />
+      <Text size="T300">Loading room…</Text>
+    </Box>
+  );
+}

src/app/hooks/useRoomReady.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { Room, RoomEvent } from 'matrix-js-sdk';
+
+/**
+ * Returns true once a room has at least one event in its live timeline.
+ *
+ * After joining a room the first /sync response may arrive before the
+ * homeserver has finished writing all state, so the Room object can exist
+ * in the SDK store with an empty timeline.  Rendering that room immediately
+ * leads to an infinite spinner (Continuwuity #779).
+ *
+ * This hook watches for incoming timeline events and flips to `true` as
+ * soon as the room has data, so components can gate rendering on it.
+ */
+export function useRoomReady(room: Room): boolean {
+  const [ready, setReady] = useState(
+    () => room.getLiveTimeline().getEvents().length > 0
+  );
+
+  useEffect(() => {
+    if (ready) return undefined;
+
+    // Check again — events may have arrived between render and effect.
+    if (room.getLiveTimeline().getEvents().length > 0) {
+      setReady(true);
+      return undefined;
+    }
+
+    const onTimeline = () => {
+      if (room.getLiveTimeline().getEvents().length > 0) {
+        setReady(true);
+      }
+    };
+
+    room.on(RoomEvent.Timeline, onTimeline);
+    return () => {
+      room.removeListener(RoomEvent.Timeline, onTimeline);
+    };
+  }, [room, ready]);
+
+  return ready;
+}

src/app/pages/client/direct/RoomProvider.tsx

@@ -1,10 +1,13 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
+import { Room } from 'matrix-js-sdk';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useDirectRooms } from './useDirectRooms';
+import { useRoomReady } from '../../../hooks/useRoomReady';
+import { RoomLoading } from '../../../components/RoomLoading';
 
 export function DirectRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
@@ -20,7 +23,15 @@ export function DirectRouteRoomProvider({ children }: { children: ReactNode }) {
 
   return (
     <RoomProvider key={room.roomId} value={room}>
-      <IsDirectRoomProvider value>{children}</IsDirectRoomProvider>
+      <IsDirectRoomProvider value>
+        <RoomReadyGate room={room}>{children}</RoomReadyGate>
+      </IsDirectRoomProvider>
     </RoomProvider>
   );
 }
+
+function RoomReadyGate({ room, children }: { room: Room; children: ReactNode }) {
+  const ready = useRoomReady(room);
+  if (!ready) return <RoomLoading />;
+  return <>{children}</>;
+}

src/app/pages/client/home/RoomProvider.tsx

@@ -1,11 +1,14 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
+import { Room } from 'matrix-js-sdk';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useHomeRooms } from './useHomeRooms';
 import { useSearchParamsViaServers } from '../../../hooks/router/useSearchParamsViaServers';
+import { useRoomReady } from '../../../hooks/useRoomReady';
+import { RoomLoading } from '../../../components/RoomLoading';
 
 export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
@@ -28,7 +31,15 @@ export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
 
   return (
     <RoomProvider key={room.roomId} value={room}>
-      <IsDirectRoomProvider value={false}>{children}</IsDirectRoomProvider>
+      <IsDirectRoomProvider value={false}>
+        <RoomReadyGate room={room}>{children}</RoomReadyGate>
+      </IsDirectRoomProvider>
     </RoomProvider>
   );
 }
+
+function RoomReadyGate({ room, children }: { room: Room; children: ReactNode }) {
+  const ready = useRoomReady(room);
+  if (!ready) return <RoomLoading />;
+  return <>{children}</>;
+}

src/app/pages/client/space/RoomProvider.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
 import { useAtom, useAtomValue } from 'jotai';
+import { Room } from 'matrix-js-sdk';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -13,6 +14,8 @@ import { useSearchParamsViaServers } from '../../../hooks/router/useSearchParams
 import { mDirectAtom } from '../../../state/mDirectList';
 import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
+import { useRoomReady } from '../../../hooks/useRoomReady';
+import { RoomLoading } from '../../../components/RoomLoading';
 
 export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
@@ -42,7 +45,9 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
     // allow to view space timeline
     return (
       <RoomProvider key={room.roomId} value={room}>
-        <IsDirectRoomProvider value={mDirects.has(room.roomId)}>{children}</IsDirectRoomProvider>
+        <IsDirectRoomProvider value={mDirects.has(room.roomId)}>
+          <RoomReadyGate room={room}>{children}</RoomReadyGate>
+        </IsDirectRoomProvider>
       </RoomProvider>
     );
   }
@@ -68,7 +73,15 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
 
   return (
     <RoomProvider key={room.roomId} value={room}>
-      <IsDirectRoomProvider value={mDirects.has(room.roomId)}>{children}</IsDirectRoomProvider>
+      <IsDirectRoomProvider value={mDirects.has(room.roomId)}>
+        <RoomReadyGate room={room}>{children}</RoomReadyGate>
+      </IsDirectRoomProvider>
     </RoomProvider>
   );
 }
+
+function RoomReadyGate({ room, children }: { room: Room; children: ReactNode }) {
+  const ready = useRoomReady(room);
+  if (!ready) return <RoomLoading />;
+  return <>{children}</>;
+}