wip: zen

packages/console/app/src/routes/workspace-picker.tsx

@@ -1,4 +1,4 @@
-import { query, useParams, action, createAsync, redirect } from "@solidjs/router"
+import { query, useParams, action, createAsync, redirect, useSubmission } from "@solidjs/router"
 import { For, Show, createEffect, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { withActor } from "~/context/auth.withActor"
@@ -42,6 +42,7 @@ const createWorkspace = action(async (form: FormData) => {
 export function WorkspacePicker() {
   const params = useParams()
   const workspaces = createAsync(() => getWorkspaces())
+  const submission = useSubmission(createWorkspace)
   const [store, setStore] = createStore({
     showForm: false,
     showDropdown: false,
@@ -135,8 +136,8 @@ export function WorkspacePicker() {
               <button type="button" data-color="ghost" onClick={() => setStore("showForm", false)}>
                 Cancel
               </button>
-              <button type="submit" data-color="primary">
-                Create
+              <button type="submit" data-color="primary" disabled={submission.pending}>
+                {submission.pending ? "Creating..." : "Create"}
               </button>
             </div>
           </div>

packages/console/app/src/routes/workspace/[id].tsx

@@ -24,10 +24,10 @@ export default function WorkspaceLayout(props: RouteSectionProps) {
               <A href={`/workspace/${params.id}/billing`} activeClass="active" data-nav-button>
                 Billing
               </A>
+              <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
+                Settings
+              </A>
             </Show>
-            <A href={`/workspace/${params.id}/settings`} activeClass="active" data-nav-button>
-              Settings
-            </A>
           </div>
         </nav>
         <div data-component="workspace-content">{props.children}</div>