feat: new onboarding

Author: jog1t

apps/hub/package.json

@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "@sentry/vite-plugin": "^2.22.2",
+    "@shikijs/transformers": "^1.24.2",
     "@tanstack/router-vite-plugin": "^1.58.12",
     "@types/file-saver": "^2",
     "@types/mime": "^4.0.0",
@@ -58,6 +59,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
+    "shiki": "^1.24.2",
     "tailwindcss": "^3.4.1",
     "turnstile-types": "^1.2.1",
     "typescript": "^5.5.4",

apps/hub/src/app.tsx

@@ -22,7 +22,7 @@ declare module "@tanstack/react-router" {
     router: typeof router;
   }
   interface StaticDataRouteOption {
-    layout?: "full" | "compact";
+    layout?: "full" | "compact" | "onboarding";
   }
 }
 

apps/hub/src/components/command-panel.tsx

@@ -7,6 +7,7 @@ import {
   CommandLoading,
   cn,
 } from "@rivet-gg/components";
+import { useIsFetching } from "@tanstack/react-query";
 import { useMatchRoute } from "@tanstack/react-router";
 import {
   type KeyboardEventHandler,
@@ -25,6 +26,7 @@ import { EnvironmentCommandPanelPage } from "./command-panel/command-panel-page/
 import { GroupCommandPanelPage } from "./command-panel/command-panel-page/group-command-panel-page";
 import { IndexCommandPanelPage } from "./command-panel/command-panel-page/index-command-panel-page";
 import { ProjectCommandPanelPage } from "./command-panel/command-panel-page/project-command-panel-page";
+import { ShimmerLine } from "./shimmer-line";
 
 export function CommandPanel() {
   const [isOpen, setOpen] = useState(false);
@@ -125,6 +127,11 @@ export function CommandPanel() {
     [pages.length, search],
   );
 
+  const isLoading =
+    useIsFetching({
+      predicate: (query) => !query.queryKey.includes("watch"),
+    }) > 0;
+
   return (
     <>
       <Button
@@ -143,6 +150,7 @@ export function CommandPanel() {
       <CommandDialog
         commandProps={{
           onKeyDown: handleKeyDown,
+          shouldFilter: !isLoading,
         }}
         open={isOpen}
         onOpenChange={setOpen}
@@ -154,11 +162,13 @@ export function CommandPanel() {
           placeholder="Type a command or search..."
         />
         <CommandPanelNavigationProvider
+          isLoading={isLoading}
           onClose={handleClose}
           onChangePage={handlePageChange}
         >
           <CommandList>
             <Suspense fallback={<CommandLoading>Hang on…</CommandLoading>}>
+              {isLoading ? <ShimmerLine className="-top-[1px]" /> : null}
               <CommandEmpty>No results found.</CommandEmpty>
               {!page ? <IndexCommandPanelPage /> : null}
               {page?.key === "group" ? (

apps/hub/src/components/command-panel/command-panel-navigation-provider.tsx

@@ -56,10 +56,12 @@ export function CommandPanelNavigationProvider({
   children,
   onClose,
   onChangePage,
+  isLoading,
 }: {
   children: ReactNode;
   onClose: () => void;
   onChangePage: (page: CommandPanelPage) => void;
+  isLoading: boolean;
 }) {
   const routerNavigate = useNavigate();
 
@@ -73,9 +75,16 @@ export function CommandPanelNavigationProvider({
     [onClose, routerNavigate],
   );
 
+  const handleChangePage = (page: CommandPanelPage) => {
+    if (isLoading) {
+      return;
+    }
+    onChangePage(page);
+  };
+
   return (
     <CommandPanelNavigationContext.Provider
-      value={{ changePage: onChangePage, close: onClose, navigate }}
+      value={{ changePage: handleChangePage, close: onClose, navigate }}
     >
       {children}
     </CommandPanelNavigationContext.Provider>

apps/hub/src/components/command-panel/command-panel-page/environment-command-panel-page.tsx

@@ -51,7 +51,7 @@ export function EnvironmentCommandPanelPage({
     },
   ] = useSuspenseQueries({
     queries: [
-      projectQueryOptions(projectNameId),
+      projectQueryOptions(projectId),
       projectMetadataQueryOptions({ projectId, environmentId }),
     ],
   });

apps/hub/src/components/error-component.tsx

@@ -65,6 +65,8 @@ export const ErrorComponent = ({
         <Button
           onClick={() => {
             router.invalidate();
+            queryClient.resetQueries();
+            queryClient.invalidateQueries();
             reset?.();
           }}
         >