feat: show loader during background effect initialization [WPB-24453]

apps/webapp/src/script/components/calling/GroupVideoGridTile.styles.ts

@@ -86,11 +86,22 @@ export const groupVideoParticipantAudioStatus = (
   };
 };
 
-export const groupVideoElementVideo = (fitContain: boolean, mirrorSelf: boolean): CSSObject => ({
+export const getGroupVideoElementStyles = (fitContain: boolean, mirrorSelf: boolean): CSSObject => ({
   objectFit: fitContain ? 'contain' : 'cover',
   transform: mirrorSelf ? 'rotateY(180deg)' : 'initial',
 });
 
 export const groupVideoPauseOverlayLabel = (minimized: boolean): CSSObject => ({
   fontSize: minimized ? '0.6875rem' : '0.875rem',
 });
+
+export const groupVideoBackgroundInitializingOverlay: CSSObject = {
+  position: 'absolute',
+  inset: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: 'inherit',
+  backgroundColor: 'var(--group-video-tile-bg)',
+  zIndex: 1,
+};

apps/webapp/src/script/components/calling/GroupVideoGridTile.test.tsx

@@ -0,0 +1,112 @@
+/*
+ * Wire
+ * Copyright (C) 2019 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {fireEvent, render} from '@testing-library/react';
+
+import {VIDEO_STATE} from '@wireapp/avs';
+
+import {Participant} from 'Repositories/calling/Participant';
+import {User} from 'Repositories/entity/User';
+import {backgroundEffectsStore} from 'Repositories/media/useBackgroundEffectsStore';
+import {createUuid} from 'Util/uuid';
+
+import {GroupVideoGridTile} from './GroupVideoGridTile';
+
+const loadingOverlaySelector = '[data-uie-name="background-effect-initializing"]';
+
+const createParticipant = (name: string) => {
+  const user = new User(createUuid());
+  user.name(name);
+
+  return new Participant(user, `client-${name}`);
+};
+
+const createMediaStream = () =>
+  ({
+    getVideoTracks: jest.fn(() => []),
+  }) as unknown as MediaStream;
+
+const createProcessedVideoStream = (stream: MediaStream) => ({
+  stream,
+  release: jest.fn(),
+});
+
+const renderComponent = ({
+  participant = createParticipant('self'),
+  selfParticipant = participant,
+}: {
+  participant?: Participant;
+  selfParticipant?: Participant;
+} = {}) =>
+  render(
+    <GroupVideoGridTile
+      minimized={false}
+      participant={participant}
+      selfParticipant={selfParticipant}
+      participantCount={1}
+      isMaximized={false}
+      onTileDoubleClick={jest.fn()}
+    />,
+  );
+
+describe('GroupVideoGridTile', () => {
+  beforeEach(() => {
+    backgroundEffectsStore.setState({
+      isInitializing: false,
+    });
+  });
+
+  it('should show loading overlay when background effect is initializing', () => {
+    backgroundEffectsStore.setState({
+      isInitializing: true,
+    });
+
+    const {container} = renderComponent();
+
+    expect(container.querySelector(loadingOverlaySelector)).toBeInTheDocument();
+  });
+
+  it('should show loading overlay while video is loading', () => {
+    const participant = createParticipant('self');
+    const videoStream = createMediaStream();
+
+    participant.videoState(VIDEO_STATE.STARTED);
+    participant.videoStream(videoStream);
+    participant.processedVideoStream(createProcessedVideoStream(videoStream));
+
+    const {container} = renderComponent({participant});
+
+    expect(container.querySelector(loadingOverlaySelector)).toBeInTheDocument();
+  });
+
+  it('should hide loading overlay when video is ready', () => {
+    const participant = createParticipant('self');
+    const videoStream = createMediaStream();
+
+    participant.videoState(VIDEO_STATE.STARTED);
+    participant.videoStream(videoStream);
+    participant.processedVideoStream(createProcessedVideoStream(videoStream));
+
+    const {container} = renderComponent({participant});
+
+    fireEvent.canPlay(container.querySelector('video')!);
+
+    expect(container.querySelector(loadingOverlaySelector)).not.toBeInTheDocument();
+  });
+});

apps/webapp/src/script/components/calling/GroupVideoGridTile.tsx

@@ -22,13 +22,14 @@ import {KeyboardEvent} from 'react';
 import {QualifiedId} from '@wireapp/api-client/lib/user';
 
 import {VIDEO_STATE} from '@wireapp/avs';
-import {TabIndex} from '@wireapp/react-ui-kit';
+import {Loading, TabIndex} from '@wireapp/react-ui-kit';
 
 import {Avatar, AVATAR_SIZE} from 'Components/Avatar';
 import {
   groupVideoActiveSpeaker,
   groupVideoActiveSpeakerTile,
-  groupVideoElementVideo,
+  groupVideoBackgroundInitializingOverlay,
+  getGroupVideoElementStyles,
   groupVideoParticipantAudioStatus,
   groupVideoParticipantName,
   groupVideoParticipantNameWrapper,
@@ -41,6 +42,7 @@ import {useKoSubscribableChildren} from 'Util/componentUtil';
 import {isEnterKey} from 'Util/keyboardUtil';
 import {t} from 'Util/localizerUtil';
 
+import {useShowLoadingOverlay} from './useShowLoadingOverlay';
 import {Video} from './Video';
 
 interface GroupVideoGridTileProps {
@@ -82,12 +84,19 @@ const GroupVideoGridTile = ({
 
   const {name} = useKoSubscribableChildren(participant?.user, ['name']);
 
+  const isSelfParticipant = participant === selfParticipant;
   const sharesScreen = videoState === VIDEO_STATE.SCREENSHARE;
   const sharesCamera = [VIDEO_STATE.STARTED, VIDEO_STATE.PAUSED].includes(videoState);
   const hasPausedVideo = videoState === VIDEO_STATE.PAUSED;
   const doVideoReconnecting = videoState === VIDEO_STATE.RECONNECTING;
   const hasActiveVideo = (sharesCamera || sharesScreen) && !!videoStream;
 
+  const {showLoadingOverlay, onVideoCanPlay} = useShowLoadingOverlay(
+    isSelfParticipant,
+    hasActiveVideo,
+    processedVideoStream,
+  );
+
   const handleTileClick = () => onTileDoubleClick(participant?.user.qualifiedId, participant?.clientId);
 
   const handleEnterTileClick = (keyboardEvent: KeyboardEvent) => {
@@ -127,9 +136,7 @@ const GroupVideoGridTile = ({
       onKeyDown={handleEnterTileClick}
       role="button"
       // minimized is passed only from CallingCell where we don't want to focus individual the tile on the tab press
-      tabIndex={
-        (!minimized || isMaximized) && participant !== selfParticipant ? TabIndex.FOCUSABLE : TabIndex.UNFOCUSABLE
-      }
+      tabIndex={(!minimized || isMaximized) && !isSelfParticipant ? TabIndex.FOCUSABLE : TabIndex.UNFOCUSABLE}
       aria-label={`Focus video ${participant?.user.id}`}
     >
       {hasActiveVideo ? (
@@ -144,7 +151,8 @@ const GroupVideoGridTile = ({
             muted
             srcObject={processedVideoStream?.stream ?? videoStream}
             className="group-video-grid__element-video"
-            css={groupVideoElementVideo(isMaximized || sharesScreen, participant === selfParticipant && sharesCamera)}
+            css={getGroupVideoElementStyles(isMaximized || sharesScreen, isSelfParticipant && sharesCamera)}
+            onCanPlay={onVideoCanPlay}
           />
         </div>
       ) : (
@@ -157,6 +165,16 @@ const GroupVideoGridTile = ({
         </div>
       )}
 
+      {showLoadingOverlay && (
+        <div
+          aria-busy={showLoadingOverlay}
+          css={groupVideoBackgroundInitializingOverlay}
+          data-uie-name="background-effect-initializing"
+        >
+          <Loading size={32} />
+        </div>
+      )}
+
       <div css={groupVideoActiveSpeakerTile(isActivelySpeaking)} />
 
       {!minimized && isMuted && (

apps/webapp/src/script/components/calling/useShowLoadingOverlay.test.ts

@@ -0,0 +1,90 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {act, renderHook} from '@testing-library/react';
+
+import {backgroundEffectsStore} from 'Repositories/media/useBackgroundEffectsStore';
+
+import {useShowLoadingOverlay} from './useShowLoadingOverlay';
+
+const createMediaStream = () =>
+  ({
+    getVideoTracks: jest.fn(() => []),
+  }) as unknown as MediaStream;
+
+const createProcessedVideoStream = (stream: MediaStream) => ({
+  stream,
+  release: jest.fn(),
+});
+
+describe('useShowLoadingOverlay', () => {
+  beforeEach(() => {
+    backgroundEffectsStore.setState({
+      isInitializing: false,
+    });
+  });
+
+  it('should show loading overlay when background effect is initializing', () => {
+    backgroundEffectsStore.setState({
+      isInitializing: true,
+    });
+
+    const {result} = renderHook(() => useShowLoadingOverlay(true, false, undefined));
+
+    expect(result.current.showLoadingOverlay).toBe(true);
+  });
+
+  it('should hide loading overlay when background effect is done initializing', () => {
+    const {result} = renderHook(() => useShowLoadingOverlay(true, false, undefined));
+
+    expect(result.current.showLoadingOverlay).toBe(false);
+  });
+
+  it('should show loading overlay while video is loading', () => {
+    const processedVideoStream = createProcessedVideoStream(createMediaStream());
+
+    const {result} = renderHook(() => useShowLoadingOverlay(true, true, processedVideoStream));
+
+    expect(result.current.showLoadingOverlay).toBe(true);
+  });
+
+  it('should hide loading overlay when video is ready', () => {
+    const processedVideoStream = createProcessedVideoStream(createMediaStream());
+
+    const {result} = renderHook(() => useShowLoadingOverlay(true, true, processedVideoStream));
+
+    act(() => {
+      result.current.onVideoCanPlay();
+    });
+
+    expect(result.current.showLoadingOverlay).toBe(false);
+  });
+
+  it('should not show overlay for non-self participants', () => {
+    backgroundEffectsStore.setState({
+      isInitializing: true,
+    });
+
+    const processedVideoStream = createProcessedVideoStream(createMediaStream());
+
+    const {result} = renderHook(() => useShowLoadingOverlay(false, true, processedVideoStream));
+
+    expect(result.current.showLoadingOverlay).toBe(false);
+  });
+});

apps/webapp/src/script/components/calling/useShowLoadingOverlay.ts

@@ -0,0 +1,57 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useCallback, useEffect, useState} from 'react';
+
+import {useBackgroundEffectsStore} from 'Repositories/media/useBackgroundEffectsStore';
+
+type ProcessedVideoStream = {
+  stream: MediaStream;
+  release: () => void;
+};
+
+const useShowLoadingOverlay = (
+  isSelfParticipant: boolean,
+  hasActiveVideo: boolean,
+  processedVideoStream?: ProcessedVideoStream,
+) => {
+  const isBackgroundEffectInitializing = useBackgroundEffectsStore(state => state.isInitializing);
+  const [isVideoReady, setIsVideoReady] = useState(false);
+
+  useEffect(() => {
+    setIsVideoReady(false);
+  }, [processedVideoStream]);
+
+  const onVideoCanPlay = useCallback(() => {
+    setIsVideoReady(true);
+  }, []);
+
+  const hasProcessedVideoStream = processedVideoStream !== undefined;
+
+  const showLoadingOverlay =
+    isSelfParticipant &&
+    (isBackgroundEffectInitializing || (hasActiveVideo && !isVideoReady && hasProcessedVideoStream));
+
+  return {
+    onVideoCanPlay,
+    showLoadingOverlay,
+  };
+};
+
+export {useShowLoadingOverlay};