fix(startup): Firefox no longer hangs on "Heating up" after login (#303)

initClient awaited navigator.storage.persist() before creating the client.
Chromium and WebKit answer at once, but Firefox shows a permission prompt
and leaves the promise pending until it's answered, so the app sat on
"Heating up" (no sync, no crypto, no IndexedDB) for every Firefox user who
didn't notice the prompt.

The request is still made (KE-1 only needs that), but startup waits at
most 1.5 s for the answer. The comment claiming persist() never prompts
is corrected.

Verified in Playwright Firefox with the prompt left unanswered
(persist() still pending): before, still "Heating up" after 20 s; now the
room list after 12 s.

Fixes #303

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/components/CallEmbedProvider.tsx

@@ -20,7 +20,6 @@ import {
 import {
   EventTimelineSetHandlerMap,
   EventType,
-  JoinRule,
   RelationType,
   Room,
   RoomEvent,
@@ -72,7 +71,8 @@ import { useReducedMotion } from '../hooks/useReducedMotion';
 import { useSetting } from '../state/hooks/settings';
 import { useCallPreferences } from '../state/hooks/callPreferences';
 import { settingsAtom } from '../state/settings';
-import { getStateEvent, getStateEvents, getMemberName } from '../utils/room';
+import { getStateEvent, getMemberName } from '../utils/room';
+import { isRingableRoom } from '../utils/callRing';
 import { StateEvent } from '../../types/matrix/room';
 import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
@@ -581,12 +581,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       // Only ring in rooms where the call button is visible: DMs or invite-only rooms
       // with no space parent. Persistent voice rooms (call rooms), space channels,
       // restricted rooms, and public rooms must never trigger ringing.
-      if (room.isCallRoom()) return;
-      const isDirect = directs.has(room.roomId);
-      const isSpaceChild = getStateEvents(room, StateEvent.SpaceParent).length > 0;
-      const joinRule = room.getJoinRule();
-      const isPrivateInviteGroup = !isSpaceChild && joinRule === JoinRule.Invite;
-      if (!isDirect && !isPrivateInviteGroup) return;
+      if (!isRingableRoom(room, directs.has(room.roomId))) return;
 
       const info: IncomingCallInfo = {
         room,

src/app/features/lotus/backgrounds/animAurora.ts

@@ -51,7 +51,7 @@ const dark: CSSProperties = {
   backgroundSize: '260% 240%, 300% 260%, 240% 280%, 220% 200%, 100% 100%, 100% 100%',
   backgroundPosition: '0% 30%, 100% 70%, 50% 0%, 20% 80%, 50% 50%, 50% 50%',
   backgroundRepeat: 'no-repeat',
-  animation: `${auroraFlow} 60s ease-in-out infinite`,
+  animation: `${auroraFlow} 60s steps(180) infinite`,
 };
 
 const light: CSSProperties = {
@@ -75,7 +75,7 @@ const light: CSSProperties = {
   backgroundSize: '260% 240%, 300% 260%, 240% 280%, 220% 200%, 100% 100%, 100% 100%',
   backgroundPosition: '0% 30%, 100% 70%, 50% 0%, 20% 80%, 50% 50%, 50% 50%',
   backgroundRepeat: 'no-repeat',
-  animation: `${auroraFlow} 60s ease-in-out infinite`,
+  animation: `${auroraFlow} 60s steps(180) infinite`,
 };
 
 export const animAurora: ChatBgVariants = { dark, light };

src/app/features/lotus/backgrounds/animFireflies.ts

@@ -55,7 +55,7 @@ export const animFireflies: ChatBgVariants = {
       '0 0', // wash A   (static)
       '0 0', // wash B   (static)
     ].join(','),
-    animation: `${firefliesDrift} 44s linear infinite`,
+    animation: `${firefliesDrift} 44s steps(528) infinite`,
   },
 
   // Light: a cozy warm dim-dusk. No harsh dots on white — soft amber motes with
@@ -93,6 +93,6 @@ export const animFireflies: ChatBgVariants = {
       '0 0', // wash A   (static)
       '0 0', // wash B   (static)
     ].join(','),
-    animation: `${firefliesDrift} 44s linear infinite`,
+    animation: `${firefliesDrift} 44s steps(528) infinite`,
   },
 };

src/app/features/lotus/backgrounds/animPulse.ts

@@ -76,7 +76,7 @@ export const animPulse: ChatBgVariants = {
       '0 0', // base wash
       '0 0', // vignette
     ].join(','),
-    animation: `${gridPulse} 22s ease-in-out infinite`,
+    animation: `${gridPulse} 22s steps(528) infinite`,
   },
 
   // Light: soft slate-blue grid on pale cool-white, a gentle luminance breathe.
@@ -116,6 +116,6 @@ export const animPulse: ChatBgVariants = {
       '0 0', // base wash
       '0 0', // vignette
     ].join(','),
-    animation: `${gridPulse} 22s ease-in-out infinite`,
+    animation: `${gridPulse} 22s steps(528) infinite`,
   },
 };

src/app/features/lotus/backgrounds/animRain.ts

@@ -97,7 +97,7 @@ export const animRain: ChatBgVariants = {
     ].join(','),
     backgroundSize: ['260px 200px', '100% 100%', '100% 100%', '100% 100%'].join(','),
     backgroundPosition: ['0 0', '0 0', '0 0', '0 0'].join(','),
-    animation: `${rainFall} 12s linear infinite`,
+    animation: `${rainFall} 12s steps(288) infinite`,
   },
 
   // Light: soft teal-grey streaks on a pale cool base — elegant, never neon.
@@ -118,6 +118,6 @@ export const animRain: ChatBgVariants = {
     ].join(','),
     backgroundSize: ['260px 200px', '100% 100%', '100% 100%', '100% 100%'].join(','),
     backgroundPosition: ['0 0', '0 0', '0 0', '0 0'].join(','),
-    animation: `${rainFall} 12s linear infinite`,
+    animation: `${rainFall} 12s steps(288) infinite`,
   },
 };

src/app/features/lotus/backgrounds/animStars.ts

@@ -68,7 +68,7 @@ export const animStars: ChatBgVariants = {
       '0 0', // nebula A
       '0 0', // nebula B
     ].join(','),
-    animation: `${starDrift} 90s linear infinite`,
+    animation: `${starDrift} 90s steps(1080) infinite`,
   },
 
   // Light: an airy pre-dawn sky. No literal white-on-white stars — instead very
@@ -112,6 +112,6 @@ export const animStars: ChatBgVariants = {
       '0 0', // wash A
       '0 0', // wash B
     ].join(','),
-    animation: `${starDrift} 100s linear infinite`,
+    animation: `${starDrift} 100s steps(1200) infinite`,
   },
 };

src/app/features/lotus/chatBackground.ts

@@ -149,6 +149,11 @@ export const getChatBg = (
   }
   // For animated backgrounds, promote the element to its own compositor layer so
   // background-position keyframes don't trigger repaints on descendant elements.
+  // [Gitea #337] background-position can't run on the compositor, so every
+  // animation frame repaints the whole chat area (45 to 70% main-thread busy
+  // at 60 fps). The drifts are slow (3–22 px/s), so each animation uses steps():
+  // ~12 updates/s for the slow ones, ~24/s for rain and pulse: visually the
+  // same, a fraction of the repaints.
   if (style.animation) {
     return { ...style, willChange: 'background-position', contain: 'paint' };
   }

src/app/features/room/RoomTimeline.tsx

@@ -138,6 +138,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
 import { useIsDirectRoom } from '../../hooks/useRoom';
+import { isRingableRoom } from '../../utils/callRing';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
@@ -2030,6 +2031,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       [EventType.RTCNotification]: (mEventId, mEvent, item) => {
         const senderId = mEvent.getSender() ?? '';
         if (!senderId || senderId === mx.getUserId()) return null;
+        // Same rule as ringing: no "Missed call" in voice rooms or space
+        // channels, where starting a call is just joining the channel.
+        if (!isRingableRoom(room, direct)) return null;
         const content = mEvent.getContent();
         const mention =
           content['m.mentions']?.room ||

src/app/utils/callRing.test.ts

@@ -0,0 +1,29 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import type { Room } from 'matrix-js-sdk';
+import { isRingableRoom } from './callRing';
+
+const fakeRoom = (opts: { callRoom?: boolean; joinRule?: string; spaceParent?: boolean }): Room =>
+  ({
+    isCallRoom: () => !!opts.callRoom,
+    getJoinRule: () => opts.joinRule ?? 'invite',
+    getLiveTimeline: () => ({
+      getState: () => ({ getStateEvents: () => (opts.spaceParent ? [{}] : []) }),
+    }),
+  }) as unknown as Room;
+
+test('voice rooms never ring or show "missed call", even as DMs', () => {
+  assert.equal(isRingableRoom(fakeRoom({ callRoom: true }), false), false);
+  assert.equal(isRingableRoom(fakeRoom({ callRoom: true }), true), false);
+});
+
+test('DMs and invite-only groups outside a space ring', () => {
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'public' }), true), true);
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'invite' }), false), true);
+});
+
+test('space channels, public and restricted rooms do not ring', () => {
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'invite', spaceParent: true }), false), false);
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'public' }), false), false);
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'restricted' }), false), false);
+});

src/app/utils/callRing.ts

@@ -0,0 +1,18 @@
+import { JoinRule, Room } from 'matrix-js-sdk';
+import { StateEvent } from '../../types/matrix/room';
+import { getStateEvents } from './room';
+
+/**
+ * Whether a call notification in this room may ring — and, by the same rule,
+ * whether an unanswered one may show as "Missed call" (Gitea #162 follow-up).
+ * Only DMs and invite-only groups outside any space ring, i.e. rooms where the
+ * call button is shown. Persistent voice rooms, space channels, restricted and
+ * public rooms never do: joining a voice channel alone is normal and isn't a
+ * "call" anyone missed.
+ */
+export const isRingableRoom = (room: Room, isDirect: boolean): boolean => {
+  if (room.isCallRoom()) return false;
+  if (isDirect) return true;
+  const isSpaceChild = getStateEvents(room, StateEvent.SpaceParent).length > 0;
+  return !isSpaceChild && room.getJoinRule() === JoinRule.Invite;
+};

src/client/initMatrix.ts

@@ -20,9 +20,12 @@ export const IDB_VERSION_CONFLICT = 'IDB_VERSION_CONFLICT';
  * session. When that happens the device "resurrects" with a blank key store and the
  * client re-uploads a one-time key at an id Synapse already holds → a permanent
  * `400 M_UNKNOWN: … already exists` upload-conflict storm (and, downstream,
- * undecryptable to-device/media keys). `persist()` grants based on engagement / PWA
- * install and shows no prompt; denial/absence is non-fatal.
+ * undecryptable to-device/media keys). Chromium/WebKit answer `persist()` at once
+ * (engagement / PWA install); Firefox shows a permission prompt and the promise
+ * stays pending until it's answered. Denial/absence is non-fatal.
  */
+const PERSIST_WAIT_MS = 1500;
+
 export const requestPersistentStorage = async (): Promise<boolean> => {
   try {
     if (!navigator.storage?.persist) return false;
@@ -39,7 +42,15 @@ export const requestPersistentStorage = async (): Promise<boolean> => {
 
 export const initClient = async (session: Session): Promise<MatrixClient> => {
   // Protect the crypto store from eviction before we create and write to it.
-  await requestPersistentStorage();
+  // [Gitea #303] Never block startup on the answer: Firefox prompts and leaves
+  // the promise pending until the user responds, which froze the app on
+  // "Heating up". KE-1 only needs the request made; give it 1.5 s at most.
+  await Promise.race([
+    requestPersistentStorage(),
+    new Promise<boolean>((resolve) => {
+      setTimeout(() => resolve(false), PERSIST_WAIT_MS);
+    }),
+  ]);
 
   const indexedDBStore = new IndexedDBStore({
     indexedDB: globalThis.indexedDB,