fix: Add spaces on starting up and scaling pages

src/App.tsx

@@ -1,6 +1,7 @@
 import { AppRouted } from '@/AppRouted';
 import { Toaster } from '@/components/ui/sonner';
 import { useDatadog } from '@/integrations/datadog/datadog';
+import { useGTM } from '@/integrations/google/gtm';
 import { useReo } from '@/integrations/reo/reo';
 import { queryClient } from '@/react-query/queryClient';
 import { QueryClientProvider } from '@tanstack/react-query';
@@ -9,6 +10,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 export function App() {
 	useReo();
 	useDatadog();
+	useGTM();
 	return (
 		<>
 			<QueryClientProvider client={queryClient}>

src/features/cluster/Scaling.tsx

@@ -47,8 +47,7 @@ export function Scaling() {
 				<h1 className="text-xl text-center">Here we go!</h1>
 				<ClusterProgress cluster={cluster} forceProgressBarVisible={true} />
 				<p>Your cluster is updating with the latest changes. This includes waiting several minutes to let
-					traffic drain safely.
-					<span className="text-muted-foreground">
+					traffic drain safely. <span className="text-muted-foreground">
 						We will let you know when we are ready for you to connect! In the meantime, join us
 						on <a href="https://discord.gg/VzZuaw3Xay" target="_blank">Discord</a>! Get real-time help from our
 						engineers, see feature drops early, and connect with others building on Fabric.</span>

src/features/cluster/StartingUp.tsx

@@ -91,8 +91,7 @@ export function StartingUp() {
 				<h1 className="text-xl text-center">Here we go!</h1>
 				<ClusterProgress cluster={cluster} forceProgressBarVisible={true} />
 				<p>Your cluster is spinning up with the latest changes, including your own DNS records and private
-					connections. Please wait while we get everything going.
-					<span className="text-muted-foreground">
+					connections. Please wait while we get everything going. <span className="text-muted-foreground">
 						We will let you know when we are ready for you to connect! In the meantime, join us
 						on <a href="https://discord.gg/VzZuaw3Xay" target="_blank">Discord</a>! Get real-time help from our
 						engineers, see feature drops early, and connect with others building on Fabric.</span>

src/integrations/google/gtm.ts

@@ -0,0 +1,30 @@
+import { isLocalStudio } from '@/config/constants';
+import { useEffect } from 'react';
+
+let initialized = false;
+const enabled = !import.meta.env.DEV && !isLocalStudio;
+
+export function useGTM() {
+	useEffect(() => {
+		if (initialized) {
+			return;
+		}
+		initialized = true;
+		if (enabled) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(function(w: any, d: any, s, l, i) {
+				w[l] = w[l] || [];
+				w[l].push({
+					'gtm.start':
+						new Date().getTime(), event: 'gtm.js',
+				});
+				const f = d.getElementsByTagName(s)[0];
+				const j = d.createElement(s);
+				const dl = l !== 'dataLayer' ? `&l=${l}` : '';
+				j.async = true;
+				j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+				f.parentNode.insertBefore(j, f);
+			})(window, document, 'script', 'dataLayer', 'GTM-5QQX432');
+		}
+		}, []);
+	}