smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: render embeds lazily (#7519)

Browse source
This commit is contained in:
David Luzar 2024-01-04 19:03:04 +01:00 • committed by GitHub
parent 1cb350b2aa
commit 8b993d409e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/excalidraw/components/App.tsx
View file

@ -526,6 +526,7 @@ class App extends React.Component<AppProps, AppState> {
public files: BinaryFiles = {}; public files: BinaryFiles = {};
public imageCache: AppClassProperties["imageCache"] = new Map(); public imageCache: AppClassProperties["imageCache"] = new Map();
private iFrameRefs = new Map<ExcalidrawElement["id"], HTMLIFrameElement>(); private iFrameRefs = new Map<ExcalidrawElement["id"], HTMLIFrameElement>();
private initializedEmbeds = new Set<ExcalidrawIframeLikeElement["id"]>();
hitLinkElement?: NonDeletedExcalidrawElement; hitLinkElement?: NonDeletedExcalidrawElement;
lastPointerDownEvent: React.PointerEvent<HTMLElement> | null = null; lastPointerDownEvent: React.PointerEvent<HTMLElement> | null = null;
@ -897,6 +898,23 @@ class App extends React.Component<AppProps, AppState> {
this.state, this.state,
); );
const isVisible = isElementInViewport(
el,
normalizedWidth,
normalizedHeight,
this.state,
);
const hasBeenInitialized = this.initializedEmbeds.has(el.id);
if (isVisible && !hasBeenInitialized) {
this.initializedEmbeds.add(el.id);
}
const shouldRender = isVisible || hasBeenInitialized;
if (!shouldRender) {
return null;
}
let src: IframeData | null; let src: IframeData | null;
if (isIframeElement(el)) { if (isIframeElement(el)) {
@ -1038,14 +1056,6 @@ class App extends React.Component<AppProps, AppState> {
src = getEmbedLink(toValidURL(el.link || "")); src = getEmbedLink(toValidURL(el.link || ""));
} }
// console.log({ src });
const isVisible = isElementInViewport(
el,
normalizedWidth,
normalizedHeight,
this.state,
);
const isActive = const isActive =
this.state.activeEmbeddable?.element === el && this.state.activeEmbeddable?.element === el &&
this.state.activeEmbeddable?.state === "active"; this.state.activeEmbeddable?.state === "active";