Decrease the number of elements by 3. (#3283)

When geo shape has no url or text we don't show the html container
containing the label and link. This results in 3 fewer dom nodes per
empty geo shape (going from 7 to 4). Similarly for an arrow without the
text label we go from 13 to 10.

First paint experience with 2000 empty rectangle shapes
Before: 1.5-1.6s
After: 1.2-1.3s

2000 rectangles shapes with text is similar between the two, around
3.6s.

### 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

### Release Notes

- Reduce the number of rendered dom nodes for geo shapes and arrows
without text.

packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -530,6 +530,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 		if (!info?.isValid) return null
 
 		const labelPosition = getArrowLabelPosition(this.editor, shape)
+		const isEditing = this.editor.getEditingShapeId() === shape.id
+		const showArrowLabel = isEditing || shape.props.text
 
 		return (
 			<>
@@ -539,6 +541,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						shouldDisplayHandles={shouldDisplayHandles && onlySelectedShape === shape}
 					/>
 				</SVGContainer>
+				{showArrowLabel && (
 					<ArrowTextLabel
 						id={shape.id}
 						text={shape.props.text}
@@ -548,6 +551,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						width={labelPosition.box.w}
 						labelColor={shape.props.labelColor}
 					/>
+				)}
 			</>
 		)
 	}

packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -383,14 +383,22 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 		const { id, type, props } = shape
 		const { labelColor, fill, font, align, verticalAlign, size, text } = props
 
+		const isEditing = this.editor.getEditingShapeId() === id
+		const showHtmlContainer = isEditing || shape.props.url || shape.props.text
+
 		return (
 			<>
 				<SVGContainer id={id}>
 					<GeoShapeBody shape={shape} />
 				</SVGContainer>
+				{showHtmlContainer && (
 					<HTMLContainer
 						id={shape.id}
-					style={{ overflow: 'hidden', width: shape.props.w, height: shape.props.h + props.growY }}
+						style={{
+							overflow: 'hidden',
+							width: shape.props.w,
+							height: shape.props.h + props.growY,
+						}}
 					>
 						<TextLabel
 							id={id}
@@ -410,6 +418,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 							<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.getZoomLevel()} />
 						)}
 					</HTMLContainer>
+				)}
 			</>
 		)
 	}