From ea6ad52a7394a79baca04c36bfb80225dc1bc0e2 Mon Sep 17 00:00:00 2001
From: Eric Lewis <ericlewis777@gmail.com>
Date: Tue, 9 Apr 2024 14:10:39 -0400
Subject: [PATCH] fix: show placeholder select while waiting for load

---
 .../src/components/shared/Select/Select.tsx   |  1 +
 .../projects/create/template/index.tsx        | 37 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/shared/Select/Select.tsx b/packages/frontend/src/components/shared/Select/Select.tsx
index 2f1667de..3578890a 100644
--- a/packages/frontend/src/components/shared/Select/Select.tsx
+++ b/packages/frontend/src/components/shared/Select/Select.tsx
@@ -219,6 +219,7 @@ export const Select = ({
     getItemProps,
     openMenu,
   } = useCombobox({
+    defaultInputValue: (options[0] as unknown as SelectOption)?.value,
     items: filteredItems,
     selectedItem: multiple ? null : (value as SelectOption) || null,
     // @ts-expect-error – there are two params but we don't need the second one
diff --git a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
index 305f2fa1..417ab241 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
@@ -143,24 +143,29 @@ const CreateRepo = () => {
             The project will be cloned into this repository
           </Heading>
         </div>
+
         <div className="flex flex-col justify-start gap-3">
           <span className="text-sm text-elements-high-em">Git account</span>
-          <Controller
-            name="account"
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <Select
-                value={{ value } as SelectOption}
-                onChange={(value) => onChange((value as SelectOption).value)}
-                options={
-                  gitAccounts.map((account) => ({
-                    value: account,
-                    label: account,
-                  })) ?? []
-                }
-              />
-            )}
-          />
+          {gitAccounts.length > 0 ? (
+            <Controller
+              name="account"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <Select
+                  value={{ value } as SelectOption}
+                  onChange={(value) => onChange((value as SelectOption).value)}
+                  options={
+                    gitAccounts.map((account) => ({
+                      value: account,
+                      label: account,
+                    })) ?? []
+                  }
+                />
+              )}
+            />
+          ) : (
+            <Select options={[]} disabled />
+          )}
         </div>
         <div className="flex flex-col justify-start gap-3">
           <span className="text-sm text-elements-high-em">Name the repo</span>