lod: dont resize images that are culled (#3970)

Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx

@@ -64,7 +64,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 		const [staticFrameSrc, setStaticFrameSrc] = useState('')
 		const [loadedSrc, setLoadedSrc] = useState('')
 		const isSelected = shape.id === this.editor.getOnlySelectedShapeId()
-		const { asset, url } = useAsset(shape.props.assetId, shape.props.w)
+		const { asset, url } = useAsset(shape.id, shape.props.assetId, shape.props.w)
 
 		useEffect(() => {
 			// We preload the image because we might have different source urls for different

packages/tldraw/src/lib/shapes/shared/useAsset.ts

@@ -1,11 +1,13 @@
-import { TLAssetId, useEditor, useValue } from '@tldraw/editor'
+import { TLAssetId, TLShapeId, useEditor, useValue } from '@tldraw/editor'
 import { useEffect, useState } from 'react'
 
 /** @internal */
-export function useAsset(assetId: TLAssetId | null, width: number) {
+export function useAsset(shapeId: TLShapeId, assetId: TLAssetId | null, width: number) {
 	const editor = useEditor()
 	const [url, setUrl] = useState<string | null>(null)
 	const asset = assetId ? editor.getAsset(assetId) : null
+	const culledShapes = editor.getCulledShapes()
+	const isCulled = culledShapes.has(shapeId)
 
 	const shapeScale = asset && 'w' in asset.props ? width / asset.props.w : 1
 	// We debounce the zoom level to reduce the number of times we fetch a new image and,
@@ -16,6 +18,8 @@ export function useAsset(assetId: TLAssetId | null, width: number) {
 	])
 
 	useEffect(() => {
+		if (isCulled) return
+
 		let isCancelled = false
 		const timer = editor.timers.setTimeout(async () => {
 			const resolvedUrl = await editor.resolveAssetUrl(assetId, {
@@ -28,7 +32,7 @@ export function useAsset(assetId: TLAssetId | null, width: number) {
 			clearTimeout(timer)
 			isCancelled = true
 		}
-	}, [assetId, asset?.props.src, screenScale, editor])
+	}, [assetId, asset?.props.src, isCulled, screenScale, editor])
 
 	return { asset, url }
 }

packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -37,7 +37,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 	component(shape: TLVideoShape) {
 		const { editor } = this
 		const showControls = editor.getShapeGeometry(shape).bounds.w * editor.getZoomLevel() >= 110
-		const { asset, url } = useAsset(shape.props.assetId, shape.props.w)
+		const { asset, url } = useAsset(shape.id, shape.props.assetId, shape.props.w)
 		const { time, playing } = shape.props
 		const isEditing = useIsEditing(shape.id)
 		const prefersReducedMotion = usePrefersReducedMotion()