add load progress for 3d scene

This commit is contained in:
mgt
2025-12-21 22:47:08 +08:00
parent 2847f53322
commit 099e50fd8f
2 changed files with 17 additions and 2 deletions

View File

@@ -125,8 +125,20 @@ export const LoadingIndicator = ({ ref }: { ref?: React.Ref<LoadingIndicatorRef
{loadingState.webglQuality}
</span>
)}
{loadingState.totalBytes > 0 && (
<span className="text-xs text-white/60 tabular-nums">
{Math.round(loadingState.loadingProgress)}%
</span>
)}
</div>
<p className="text-xs text-white/70">{loadingState.webglDetail || t('loading.webgl.building')}</p>
{loadingState.totalBytes > 0 ? (
<p className="text-xs text-white/70 tabular-nums">
{(loadingState.loadedBytes / 1024 / 1024).toFixed(1)}MB /{' '}
{(loadingState.totalBytes / 1024 / 1024).toFixed(1)}MB
</p>
) : (
<p className="text-xs text-white/70">{loadingState.webglDetail || t('loading.webgl.building')}</p>
)}
</>
) : (
// 图片加载状态

View File

@@ -143,7 +143,7 @@ export const ProgressiveImage = ({
const handleWebGLLoadingStateChange = useWebGLLoadingState(loadingIndicatorRef)
const handleThreeDLoadingStateUpdate = useCallback(
(state: { isVisible?: boolean }) => {
(state: { isVisible?: boolean; loadingProgress?: number; loadedBytes?: number; totalBytes?: number }) => {
if (state.isVisible === false) {
loadingIndicatorRef?.current?.updateLoadingState({ isVisible: false })
return
@@ -158,6 +158,9 @@ export const ProgressiveImage = ({
webglMessage: t('photo.3d.fetching'),
webglDetail: t('photo.3d.fetchingDetail'),
webglQuality: 'unknown',
loadingProgress: state.loadingProgress ?? 0,
loadedBytes: state.loadedBytes ?? 0,
totalBytes: state.totalBytes ?? 0,
})
},
[loadingIndicatorRef, t],