Prevent unnecessary fetching of readonly slugs (#3663)

Prevents unnecessary fetching of readonly slugs. We only need to fetch
it if we don't have it yet.

There was also a weird issue with `window.location.href` sometimes
returning encoded search params and sometimes decoded ones:


![image](https://github.com/tldraw/tldraw/assets/2523721/ca1e36c6-5e86-4e48-9350-c53de32a9f2e)

This then caused an additional fetch in the `setInterval` since the
[urls did not
match](https://github.com/tldraw/tldraw/blob/main/apps/dotcom/src/components/ShareMenu.tsx#L140).

![CleanShot 2024-04-30 at 14 37
12](https://github.com/tldraw/tldraw/assets/2523721/b1c540aa-902a-4574-a8e7-a0507f7dbda2)

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

### Change Type

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

- [ ] `sdk` — Changes the tldraw SDK
- [x] `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


### Test Plan

1. Open a multiplayer room. You should only see one fetch for the
readonly slug.

1. Open a local room.
2. Share it. You should only see one fetch for the readonly slug.

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

### Release Notes

- Prevent unnecessary fetching of readonly slugs.

apps/dotcom/src/components/ShareMenu.tsx

@@ -124,8 +124,9 @@ export const ShareMenu = React.memo(function ShareMenu() {
 			})
 		}
 
+		if (!shareState.readonlyUrl) {
 			getReadonlyUrl().then((readonlyUrl) => {
-			if (readonlyUrl && !shareState.readonlyQrCodeDataUrl) {
+				if (readonlyUrl) {
 					// fetch the readonly QR code data URL
 					createQRCodeImageDataString(readonlyUrl).then((dataUrl) => {
 						if (!cancelled) {
@@ -134,6 +135,13 @@ export const ShareMenu = React.memo(function ShareMenu() {
 					})
 				}
 			})
+		} else if (!shareState.readonlyQrCodeDataUrl) {
+			createQRCodeImageDataString(shareState.readonlyUrl).then((dataUrl) => {
+				if (!cancelled) {
+					setShareState((s) => ({ ...s, readonlyQrCodeDataUrl: dataUrl }))
+				}
+			})
+		}
 
 		const interval = setInterval(() => {
 			const url = window.location.href

apps/dotcom/src/utils/sharing.ts

@@ -70,7 +70,12 @@ async function getSnapshotLink(
 		return ''
 	}
 	const paramsToUse = getViewportUrlQuery(editor)
-	const params = paramsToUse ? `?${new URLSearchParams(paramsToUse).toString()}` : ''
+	// React router has an issue with the search params being encoded, which can cause multiple navigations
+	// and can also make us believe that the URL has changed when it hasn't.
+	// https://github.com/tldraw/tldraw/pull/3663#discussion_r1584946080
+	const params = paramsToUse
+		? decodeURIComponent(`?${new URLSearchParams(paramsToUse).toString()}`)
+		: ''
 	return new Blob([`${window.location.origin}/${SNAPSHOT_PREFIX}/${response.roomId}${params}`], {
 		type: 'text/plain',
 	})
@@ -134,7 +139,13 @@ export function useSharing(): TLUiOverrides {
 
 							const query = getViewportUrlQuery(editor)
 							const origin = window.location.origin
-							const pathname = `/${ROOM_PREFIX}/${response.slug}?${new URLSearchParams(query ?? {}).toString()}`
+
+							// React router has an issue with the search params being encoded, which can cause multiple navigations
+							// and can also make us believe that the URL has changed when it hasn't.
+							// https://github.com/tldraw/tldraw/pull/3663#discussion_r1584946080
+							const pathname = decodeURIComponent(
+								`/${ROOM_PREFIX}/${response.slug}?${new URLSearchParams(query ?? {}).toString()}`
+							)
 							if (runningInIFrame) {
 								window.open(`${origin}${pathname}`)
 							} else {