fix: add skeleton (remove blinking)

Author: jog1t

frontend/packages/components/src/third-party-providers.tsx

@@ -36,6 +36,12 @@ export function initThirdPartyProviders(router: unknown, debug: boolean) {
 			dsn: config.sentry.dsn,
 			integrations,
 			tunnel: getConfig().sentry?.tunnel,
+			tracePropagationTargets: [
+				/.*\.rivet\.dev/,
+				/.*\.rivet\.gg/,
+				/.*rivet-dev\.vercel\.app/,
+				/localhost/,
+			],
 		});
 	}
 }

frontend/src/app/route-layout.tsx

@@ -1,6 +1,7 @@
 import { Outlet } from "@tanstack/react-router";
 import { useRef, useState } from "react";
 import type { ImperativePanelHandle } from "react-resizable-panels";
+import { H2, Skeleton } from "@/components";
 import { RootLayoutContextProvider } from "@/components/actors/root-layout-context";
 import * as Layout from "./layout";
 
@@ -35,3 +36,29 @@ export function RouteLayout({
 		</Layout.Root>
 	);
 }
+
+export function PendingRouteLayout() {
+	return (
+		<RouteLayout>
+			<div className="bg-card h-full border my-2 mr-2 rounded-lg">
+				<div className="mt-2 flex justify-between items-center px-6 py-4">
+					<H2 className="mb-2">
+						<Skeleton className="w-48 h-8" />
+					</H2>
+				</div>
+				<p className="max-w-5xl mb-6 px-6 text-muted-foreground">
+					<Skeleton className="w-full h-4" />
+				</p>
+				<hr className="mb-4" />
+				<div className="p-4 px-6 max-w-5xl ">
+					<Skeleton className="h-8 w-48 mb-4" />
+					<div className="flex flex-wrap gap-2 my-4">
+						<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
+						<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
+						<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
+					</div>
+				</div>
+			</div>
+		</RouteLayout>
+	);
+}

frontend/src/routes/_context/_cloud/orgs.$organization/index.tsx

@@ -2,7 +2,7 @@ import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
 import { match } from "ts-pattern";
 import CreateProjectFrameContent from "@/app/dialogs/create-project-frame";
 import { RouteError } from "@/app/route-error";
-import { RouteLayout } from "@/app/route-layout";
+import { PendingRouteLayout, RouteLayout } from "@/app/route-layout";
 import { Card, H2, Skeleton } from "@/components";
 
 export const Route = createFileRoute("/_context/_cloud/orgs/$organization/")({
@@ -37,29 +37,7 @@ export const Route = createFileRoute("/_context/_cloud/orgs/$organization/")({
 	wrapInSuspense: true,
 	pendingMinMs: 0,
 	pendingMs: 0,
-	pendingComponent: () => (
-		<RouteLayout>
-			<div className="bg-card h-full border my-2 mr-2 rounded-lg">
-				<div className="mt-2 flex justify-between items-center px-6 py-4">
-					<H2 className="mb-2">
-						<Skeleton className="w-48 h-8" />
-					</H2>
-				</div>
-				<p className="max-w-5xl mb-6 px-6 text-muted-foreground">
-					<Skeleton className="w-full h-4" />
-				</p>
-				<hr className="mb-4" />
-				<div className="p-4 px-6 max-w-5xl ">
-					<Skeleton className="h-8 w-48 mb-4" />
-					<div className="flex flex-wrap gap-2 my-4">
-						<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
-						<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
-						<Skeleton className="min-w-48 h-auto min-h-28 rounded-md" />
-					</div>
-				</div>
-			</div>
-		</RouteLayout>
-	),
+	pendingComponent: PendingRouteLayout,
 	component: RouteComponent,
 	errorComponent: RouteError,
 });

frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { match } from "ts-pattern";
 import { createProjectContext } from "@/app/data-providers/cloud-data-provider";
 import { RouteError } from "@/app/route-error";
+import { PendingRouteLayout } from "@/app/route-layout";
 import { useDialog } from "@/app/use-dialog";
 
 export const Route = createFileRoute(
@@ -25,6 +26,9 @@ export const Route = createFileRoute(
 			});
 	},
 	errorComponent: RouteError,
+	pendingMinMs: 0,
+	pendingMs: 0,
+	pendingComponent: PendingRouteLayout,
 });
 
 function RouteComponent() {

frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { createNamespaceContext } from "@/app/data-providers/cloud-data-provider";
 import { NotFoundCard } from "@/app/not-found-card";
-import { RouteLayout } from "@/app/route-layout";
+import { PendingRouteLayout, RouteLayout } from "@/app/route-layout";
 
 export const Route = createFileRoute(
 	"/_context/_cloud/orgs/$organization/projects/$project/ns/$namespace",
@@ -30,6 +30,9 @@ export const Route = createFileRoute(
 		};
 	},
 	notFoundComponent: () => <NotFoundCard />,
+	pendingMinMs: 0,
+	pendingMs: 0,
+	pendingComponent: PendingRouteLayout,
 });
 
 function RouteComponent() {

frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx

@@ -255,7 +255,7 @@ function ProviderDropdown({ children }: { children: React.ReactNode }) {
 				>
 					Vercel{" "}
 					<span className="text-[0.55rem] leading-none absolute right-0 top-[0.1rem] ">
-						Coming soon!
+						Soon!
 					</span>
 				</DropdownMenuItem>
 			</DropdownMenuContent>

frontend/turbo.json

@@ -4,17 +4,17 @@
 	"tasks": {
 		"build:engine": {
 			"dependsOn": ["^build"],
-			"env": ["VITE_APP_*"],
+			"env": ["VITE_APP_*", "DEPLOYMENT_TYPE"],
 			"outputs": ["dist/**"]
 		},
 		"build:inspector": {
 			"dependsOn": ["^build"],
-			"env": ["VITE_APP_*"],
+			"env": ["VITE_APP_*", "DEPLOYMENT_TYPE"],
 			"outputs": ["dist/**"]
 		},
 		"build:cloud": {
 			"dependsOn": ["^build"],
-			"env": ["VITE_APP_*"],
+			"env": ["VITE_APP_*", "DEPLOYMENT_TYPE"],
 			"outputs": ["dist/**"]
 		},
 		"dev": {