root
/
cesium
mirror of https://github.com/CesiumGS/cesium.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

limit gallery card rendering to help performance

This commit is contained in:
jjspace 2025-08-13 14:04:27 -04:00
parent ab0d640ef3
commit 3e395866c2
No known key found for this signature in database
GPG Key ID: F2EE53A25EF6F396
2 changed files with 32 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/sandcastle/src/App.tsx
View File

@ -353,6 +353,33 @@ function App() {
[galleryItems],
);
const loadDemo = useCallback(
function loadDemo(item: GalleryItem, switchToCode: boolean) {
// Load the gallery item every time it's clicked
loadGalleryItem(item.id);
const searchParams = new URLSearchParams(window.location.search);
if (
!searchParams.has("id") ||
(searchParams.has("id") && searchParams.get("id") !== item.id)
) {
// only push state if it's not the current url to prevent duplicated in history
window.history.pushState({}, "", `${getBaseUrl()}?id=${item.id}`);
if (
!searchParams.has("id") ||
(searchParams.has("id") && searchParams.get("id") !== item.id)
) {
// only push state if it's not the current url to prevent duplicated in history
window.history.pushState({}, "", `${getBaseUrl()}?id=${item.id}`);
}
if (switchToCode) {
setLeftPanel("editor");
}
}
},
[loadGalleryItem],
);
useEffect(() => {
let ignore = false;
async function fetchGallery() {
@ -457,7 +484,7 @@ function App() {
<PopoverDescription>{description}</PopoverDescription>
</Popover>
</PopoverProvider>
<Button tone="accent" onClick={() => share()}>
<Button tone="accent" onClick={share}>
<Icon href={shareIcon} /> Share
</Button>
<Divider aria-orientation="vertical" />
@ -537,37 +564,7 @@ function App() {
<Gallery
hidden={leftPanel !== "gallery"}
galleryItems={galleryItems}
loadDemo={(item, switchToCode) => {
// Load the gallery item every time it's clicked
loadGalleryItem(item.id);
const searchParams = new URLSearchParams(window.location.search);
if (
!searchParams.has("id") ||
(searchParams.has("id") && searchParams.get("id") !== item.id)
) {
// only push state if it's not the current url to prevent duplicated in history
window.history.pushState(
{},
"",
`${getBaseUrl()}?id=${item.id}`,
);
if (
!searchParams.has("id") ||
(searchParams.has("id") && searchParams.get("id") !== item.id)
) {
// only push state if it's not the current url to prevent duplicated in history
window.history.pushState(
{},
"",
`${getBaseUrl()}?id=${item.id}`,
);
}
if (switchToCode) {
setLeftPanel("editor");
}
}
}}
loadDemo={loadDemo}
/>
</Allotment.Pane>
<Allotment.Pane className="right-panel">

6
packages/sandcastle/src/Gallery.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { memo, useEffect, useMemo, useRef, useState } from "react";
import "./Gallery.css";
import { Badge, IconButton, Select, Spinner, TextBox } from "@stratakit/bricks";
import { getBaseUrl } from "./util/getBaseUrl";
@ -171,7 +171,7 @@ export function GallerySearch({
);
}
export function GalleryCard({
export const GalleryCard = memo(function GalleryCard({
item,
loadDemo,
}: {
@ -213,7 +213,7 @@ export function GalleryCard({
/>
</a>
);
}
});
function Gallery({
galleryItems,