Add connecting screen override. (#2273)

Adds a `LoadingScreen` override option. 

Resolves https://github.com/tldraw/tldraw/issues/2269

### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Allow users to customize the connecting screen.

packages/editor/src/lib/TldrawEditor.tsx

@@ -14,6 +14,7 @@ import classNames from 'classnames'
 import { Canvas } from './components/Canvas'
 import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
+import { DefaultLoadingScreen } from './components/default-components/DefaultLoadingScreen'
 import { TLUser, createTLUser } from './config/createTLUser'
 import { TLAnyShapeUtilConstructor } from './config/defaultShapes'
 import { Editor } from './editor/Editor'
@@ -156,6 +157,7 @@ export const TldrawEditor = memo(function TldrawEditor({
 		...rest,
 		shapeUtils: rest.shapeUtils ?? EMPTY_SHAPE_UTILS_ARRAY,
 		tools: rest.tools ?? EMPTY_TOOLS_ARRAY,
+		components,
 	}
 
 	return (
@@ -235,7 +237,8 @@ const TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({
 			throw store.error
 		}
 		case 'loading': {
-			return <LoadingScreen>Connecting...</LoadingScreen>
+			const LoadingScreen = rest.components?.LoadingScreen ?? DefaultLoadingScreen
+			return <LoadingScreen />
 		}
 		case 'not-synced': {
 			break

packages/editor/src/lib/components/default-components/DefaultLoadingScreen.tsx

@@ -0,0 +1,10 @@
+import { ComponentType } from 'react'
+import { LoadingScreen } from '../../TldrawEditor'
+
+/** @public */
+export type TLLoadingScreenComponent = ComponentType<object>
+
+/** @public */
+export const DefaultLoadingScreen: TLLoadingScreenComponent = () => {
+	return <LoadingScreen>Connecting...</LoadingScreen>
+}

packages/editor/src/lib/hooks/useEditorComponents.tsx

@@ -22,6 +22,7 @@ import {
 	TLHoveredShapeIndicatorComponent,
 } from '../components/default-components/DefaultHoveredShapeIndicator'
 import { TLInFrontOfTheCanvas } from '../components/default-components/DefaultInFrontOfTheCanvas'
+import { TLLoadingScreenComponent } from '../components/default-components/DefaultLoadingScreen'
 import { TLOnTheCanvas } from '../components/default-components/DefaultOnTheCanvas'
 import {
 	DefaultScribble,
@@ -72,6 +73,7 @@ export interface BaseEditorComponents {
 	HoveredShapeIndicator: TLHoveredShapeIndicatorComponent
 	OnTheCanvas: TLOnTheCanvas
 	InFrontOfTheCanvas: TLInFrontOfTheCanvas
+	LoadingScreen: TLLoadingScreenComponent
 }
 
 // These will always have defaults