移除资源画布加载转圈提示
转圈的判定与状态联动引入了多处副作用,按要求整体移除 删除 ResourceBookThumbnail 的 loading 属性与框内转圈、resourceBookIsLoading 判定函数、对应样式和用例 资源画布恢复为不显示加载态
This commit is contained in:
@@ -5634,17 +5634,6 @@ iframe.preview-frame {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.game-resource-book-thumbnail-loading {
|
||||
position: absolute;
|
||||
inset: 42px 0 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #c46a40;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.game-resource-book-manager[data-book-motion='running']
|
||||
.game-resource-book-scene-world {
|
||||
opacity: 0;
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
Image,
|
||||
Info,
|
||||
ListFilter,
|
||||
Loader2,
|
||||
Maximize2,
|
||||
Minus,
|
||||
Music2,
|
||||
@@ -99,7 +98,6 @@ import {
|
||||
} from './resourceBookLayout';
|
||||
import {
|
||||
initialResourceBookState,
|
||||
resourceBookIsLoading,
|
||||
resourceBookReducer,
|
||||
resourceBookSceneCategory,
|
||||
resourceBookShowsChildCards,
|
||||
@@ -912,7 +910,6 @@ function ResourceBookThumbnail({
|
||||
resources,
|
||||
onOpen,
|
||||
registerElement,
|
||||
loading = false,
|
||||
}: {
|
||||
category: ResourceCategory;
|
||||
resources: ProjectResource[];
|
||||
@@ -921,7 +918,6 @@ function ResourceBookThumbnail({
|
||||
category: ResourceCategory,
|
||||
element: HTMLElement | null,
|
||||
) => void;
|
||||
loading?: boolean;
|
||||
}) {
|
||||
const stacks = Array.from(
|
||||
resources.reduce((groups, resource) => {
|
||||
@@ -980,15 +976,6 @@ function ResourceBookThumbnail({
|
||||
<span>打开{categoryLabels[category]}</span>
|
||||
<span aria-hidden="true">↗</span>
|
||||
</span>
|
||||
{loading ? (
|
||||
<span
|
||||
className="game-resource-book-thumbnail-loading"
|
||||
role="status"
|
||||
aria-label="正在加载该栏目资源"
|
||||
>
|
||||
<Loader2 size={18} aria-hidden="true" className="animate-spin" />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2202,40 +2189,6 @@ export default function ProjectDevelopmentView({
|
||||
sortMode,
|
||||
visibleCategoryOrder,
|
||||
]);
|
||||
// 每个功能画布框内各自判断加载态:该栏目一张预览都没落地时转圈。
|
||||
const resourceBookCategorySettledPreviews = useMemo(() => {
|
||||
const counts = new Map<
|
||||
ResourceCategory,
|
||||
{ previewable: number; settled: number }
|
||||
>();
|
||||
for (const resource of visibleResources) {
|
||||
const kind = projectResourceCardPreviewKind(resource);
|
||||
// 版本、占位和音频卡片本来就不请求卡片预览,不能计入加载等待。
|
||||
if (kind === 'version' || kind === 'placeholder' || kind === 'audio') {
|
||||
continue;
|
||||
}
|
||||
const entry = counts.get(resource.category) ?? {
|
||||
previewable: 0,
|
||||
settled: 0,
|
||||
};
|
||||
entry.previewable += 1;
|
||||
const identity = resourceCardPreviews.identityByResourceId.get(
|
||||
resource.id,
|
||||
);
|
||||
const status = identity
|
||||
? resourceCardPreviews.previews.get(identity)?.status
|
||||
: undefined;
|
||||
if (status === 'loaded' || status === 'failed') {
|
||||
entry.settled += 1;
|
||||
}
|
||||
counts.set(resource.category, entry);
|
||||
}
|
||||
return counts;
|
||||
}, [
|
||||
resourceCardPreviews.identityByResourceId,
|
||||
resourceCardPreviews.previews,
|
||||
visibleResources,
|
||||
]);
|
||||
const setResourceCanvasViewport = useCallback(
|
||||
(
|
||||
category: ResourceCategory,
|
||||
@@ -5791,21 +5744,6 @@ export default function ProjectDevelopmentView({
|
||||
}
|
||||
onOpen={openResourceBookChild}
|
||||
registerElement={registerResourceBookThumbnail}
|
||||
loading={resourceBookIsLoading({
|
||||
resourceCount:
|
||||
projectResourcesByCategory.get(category)
|
||||
?.length ?? 0,
|
||||
cardsReady:
|
||||
sortMode !== 'dependency' ||
|
||||
resourceGraphInitializationReady,
|
||||
previewableCount:
|
||||
resourceBookCategorySettledPreviews.get(category)
|
||||
?.previewable ?? 0,
|
||||
settledPreviewCount:
|
||||
resourceBookCategorySettledPreviews.get(
|
||||
category,
|
||||
)?.settled ?? 0,
|
||||
})}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -78,25 +78,3 @@ export function resourceBookShowsOverviewCards(state: ResourceBookState) {
|
||||
export function resourceBookShowsChildCards(state: ResourceBookState) {
|
||||
return state.view === 'child';
|
||||
}
|
||||
|
||||
/**
|
||||
* 每个功能画布框内各自显示加载态。两种情况都要转圈:
|
||||
* 1. 卡片本身还没渲染出来(依赖图/布局就绪之前整块画布是空的);
|
||||
* 2. 卡片已渲染,但该栏目需要预览的素材一张都还没落地。
|
||||
* 预览失败同样算落地,避免一直转圈;加载态不拦截点击,没加载完也能进栏目。
|
||||
*/
|
||||
export function resourceBookIsLoading({
|
||||
resourceCount,
|
||||
cardsReady,
|
||||
previewableCount,
|
||||
settledPreviewCount,
|
||||
}: {
|
||||
resourceCount: number;
|
||||
cardsReady: boolean;
|
||||
previewableCount: number;
|
||||
settledPreviewCount: number;
|
||||
}) {
|
||||
if (resourceCount <= 0) return false;
|
||||
if (!cardsReady) return true;
|
||||
return previewableCount > 0 && settledPreviewCount <= 0;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { describe, expect, it } from 'vitest';
|
||||
|
||||
import {
|
||||
initialResourceBookState,
|
||||
resourceBookIsLoading,
|
||||
resourceBookReducer,
|
||||
resourceBookSceneCategory,
|
||||
resourceBookShowsOverviewCards,
|
||||
@@ -104,40 +103,3 @@ describe('resource book state machine', () => {
|
||||
).toEqual(switched);
|
||||
});
|
||||
});
|
||||
|
||||
describe('resource book loading state', () => {
|
||||
const ready = {
|
||||
resourceCount: 3,
|
||||
cardsReady: true,
|
||||
previewableCount: 3,
|
||||
settledPreviewCount: 1,
|
||||
};
|
||||
|
||||
it('never spins for an empty section', () => {
|
||||
expect(resourceBookIsLoading({ ...ready, resourceCount: 0 })).toBe(false);
|
||||
});
|
||||
|
||||
it('spins while the section cards are not rendered yet', () => {
|
||||
expect(resourceBookIsLoading({ ...ready, cardsReady: false })).toBe(true);
|
||||
});
|
||||
|
||||
it('spins while the section still has no settled preview', () => {
|
||||
expect(
|
||||
resourceBookIsLoading({ ...ready, settledPreviewCount: 0 }),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it('does not wait for previews on sections that never request them', () => {
|
||||
expect(
|
||||
resourceBookIsLoading({
|
||||
...ready,
|
||||
previewableCount: 0,
|
||||
settledPreviewCount: 0,
|
||||
}),
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it('stops as soon as one preview in that section settles', () => {
|
||||
expect(resourceBookIsLoading(ready)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user