fix: improve WebRTC loading indicator

This commit is contained in:
wenjie
2026-05-19 17:31:19 +08:00
parent b653f905e4
commit 6ae742deed

View File

@@ -1,4 +1,5 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { Spin } from 'antd';
import clsx from 'clsx'; import clsx from 'clsx';
import { useAtom, useAtomValue } from 'jotai'; import { useAtom, useAtomValue } from 'jotai';
import { w3cwebsocket as W3cWebSocket } from 'websocket'; import { w3cwebsocket as W3cWebSocket } from 'websocket';
@@ -85,12 +86,6 @@ export const H264Webrtc = () => {
} }
}; };
peer.onconnectionstatechange = () => {
if (peer.iceConnectionState === 'connected' || peer.connectionState === 'connected') {
setIsLoading(false);
}
};
peer.ontrack = (event) => { peer.ontrack = (event) => {
if (videoElement && event.track.kind === 'video') { if (videoElement && event.track.kind === 'video') {
videoElement.srcObject = new MediaStream([event.track]); videoElement.srcObject = new MediaStream([event.track]);
@@ -258,10 +253,8 @@ export const H264Webrtc = () => {
</div> </div>
{isLoading && ( {isLoading && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/20"> <div className="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[2px] transition-all duration-300">
<div className="rounded-full bg-neutral-900/85 px-4 py-2 text-sm text-neutral-100 shadow-lg"> <Spin size="large" />
Loading
</div>
</div> </div>
)} )}
</div> </div>