diff --git a/apps/examples/src/examples/exploded/ExplodedExample.tsx b/apps/examples/src/examples/exploded/ExplodedExample.tsx
index f53dce67c..5f9d0e09b 100644
--- a/apps/examples/src/examples/exploded/ExplodedExample.tsx
+++ b/apps/examples/src/examples/exploded/ExplodedExample.tsx
@@ -1,6 +1,8 @@
import {
ContextMenu,
DefaultContextMenuContent,
+ ErrorScreen,
+ LoadingScreen,
TldrawEditor,
TldrawHandles,
TldrawScribble,
@@ -10,7 +12,9 @@ import {
defaultShapeTools,
defaultShapeUtils,
defaultTools,
+ usePreloadAssets,
} from 'tldraw'
+import { defaultEditorAssetUrls } from 'tldraw/src/lib/utils/static-assets/assetUrls'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file!
@@ -26,6 +30,16 @@ const defaultComponents = {
//[2]
export default function ExplodedExample() {
+ const assetLoading = usePreloadAssets(defaultEditorAssetUrls)
+
+ if (assetLoading.error) {
+ return Could not load assets.
+ }
+
+ if (!assetLoading.done) {
+ return Loading assets...
+ }
+
return (
void): reado
// @public (undocumented)
export function useNativeClipboardEvents(): void;
+// @public (undocumented)
+export function usePreloadAssets(assetUrls: TLEditorAssetUrls): {
+ done: boolean;
+ error: boolean;
+};
+
// @public (undocumented)
export function useReadonly(): boolean;
diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json
index a68690d00..1210a98fc 100644
--- a/packages/tldraw/api/api.json
+++ b/packages/tldraw/api/api.json
@@ -27982,6 +27982,52 @@
"parameters": [],
"name": "useNativeClipboardEvents"
},
+ {
+ "kind": "Function",
+ "canonicalReference": "tldraw!usePreloadAssets:function(1)",
+ "docComment": "/**\n * @public\n */\n",
+ "excerptTokens": [
+ {
+ "kind": "Content",
+ "text": "export declare function usePreloadAssets(assetUrls: "
+ },
+ {
+ "kind": "Reference",
+ "text": "TLEditorAssetUrls",
+ "canonicalReference": "tldraw!~TLEditorAssetUrls:type"
+ },
+ {
+ "kind": "Content",
+ "text": "): "
+ },
+ {
+ "kind": "Content",
+ "text": "{\n done: boolean;\n error: boolean;\n}"
+ },
+ {
+ "kind": "Content",
+ "text": ";"
+ }
+ ],
+ "fileUrlPath": "packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts",
+ "returnTypeTokenRange": {
+ "startIndex": 3,
+ "endIndex": 4
+ },
+ "releaseTag": "Public",
+ "overloadIndex": 1,
+ "parameters": [
+ {
+ "parameterName": "assetUrls",
+ "parameterTypeTokenRange": {
+ "startIndex": 1,
+ "endIndex": 2
+ },
+ "isOptional": false
+ }
+ ],
+ "name": "usePreloadAssets"
+ },
{
"kind": "Function",
"canonicalReference": "tldraw!useReadonly:function(1)",
diff --git a/packages/tldraw/src/index.ts b/packages/tldraw/src/index.ts
index cc2a98d15..6f37098e5 100644
--- a/packages/tldraw/src/index.ts
+++ b/packages/tldraw/src/index.ts
@@ -87,6 +87,7 @@ export { useExportAs } from './lib/ui/hooks/useExportAs'
export { useKeyboardShortcuts } from './lib/ui/hooks/useKeyboardShortcuts'
export { useLocalStorageState } from './lib/ui/hooks/useLocalStorageState'
export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
+export { usePreloadAssets } from './lib/ui/hooks/usePreloadAssets'
export { useReadonly } from './lib/ui/hooks/useReadonly'
export { useRelevantStyles } from './lib/ui/hooks/useRelevantStyles'
export {
diff --git a/packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts b/packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts
index 7aa1f23e3..0adc2f9ba 100644
--- a/packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts
+++ b/packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts
@@ -56,6 +56,7 @@ function getTypefaces(assetUrls: TLEditorAssetUrls) {
}
}
+/** @public */
export function usePreloadAssets(assetUrls: TLEditorAssetUrls) {
const typefaces = useMemo(() => getTypefaces(assetUrls), [assetUrls])