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])