From 0822db2ee4a845629be220854cc71c4cd5fdc531 Mon Sep 17 00:00:00 2001
From: Che <30403707+Che-Zhu@users.noreply.github.com>
Date: Mon, 9 Mar 2026 16:03:17 +0800
Subject: [PATCH] fix(projects): avoid showing install modal while loading
 repos

---
 .../_components/import-github-dialog.tsx      | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/(dashboard)/projects/_components/import-github-dialog.tsx b/app/(dashboard)/projects/_components/import-github-dialog.tsx
index 3a281d2..bb47668 100644
--- a/app/(dashboard)/projects/_components/import-github-dialog.tsx
+++ b/app/(dashboard)/projects/_components/import-github-dialog.tsx
@@ -17,7 +17,7 @@ import {
 import { createProject } from '@/lib/actions/project'
 import { env } from '@/lib/env'
 
-type Step = 'check-github-app' | 'select-repo'
+type Step = 'loading' | 'check-github-app' | 'select-repo'
 
 interface ImportGitHubDialogProps {
   open: boolean
@@ -25,8 +25,8 @@ interface ImportGitHubDialogProps {
 }
 
 export function ImportGitHubDialog({ open, onOpenChange }: ImportGitHubDialogProps) {
-  const [step, setStep] = useState<Step>('check-github-app')
-  const [isLoading, setIsLoading] = useState(false)
+  const [step, setStep] = useState<Step>('loading')
+  const [isLoading, setIsLoading] = useState(true)
   const [searchQuery, setSearchQuery] = useState('')
 
   // Step 1 state
@@ -38,7 +38,7 @@ export function ImportGitHubDialog({ open, onOpenChange }: ImportGitHubDialogPro
   const [isCreating, setIsCreating] = useState(false)
 
   const resetState = useCallback(() => {
-    setStep('check-github-app')
+    setStep('loading')
     setIsLoading(true)
     setSearchQuery('')
     setHasInstallation(false)
@@ -48,6 +48,7 @@ export function ImportGitHubDialog({ open, onOpenChange }: ImportGitHubDialogPro
   }, [])
 
   const checkIdentity = useCallback(async () => {
+    setStep('loading')
     setIsLoading(true)
     try {
       // Directly check for GitHub App installation
@@ -58,6 +59,8 @@ export function ImportGitHubDialog({ open, onOpenChange }: ImportGitHubDialogPro
         if (repoResult.success) {
           setRepos(repoResult.data)
           setStep('select-repo')
+        } else {
+          setStep('check-github-app')
         }
       } else {
         setHasInstallation(false)
@@ -155,18 +158,17 @@ export function ImportGitHubDialog({ open, onOpenChange }: ImportGitHubDialogPro
   )
 
   const renderStepContent = () => {
-    if (isLoading && step === 'check-github-app' && !hasInstallation) {
-      return (
-        <div className="flex items-center justify-center py-12">
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <MdRefresh className="w-4 h-4 animate-spin" />
-            <span>Checking GitHub App installation...</span>
+    switch (step) {
+      case 'loading':
+        return (
+          <div className="flex items-center justify-center py-12">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <MdRefresh className="w-4 h-4 animate-spin" />
+              <span>Loading your GitHub repositories...</span>
+            </div>
           </div>
-        </div>
-      )
-    }
+        )
 
-    switch (step) {
       case 'check-github-app':
         if (hasInstallation) {
           return null
@@ -270,6 +272,8 @@ export function ImportGitHubDialog({ open, onOpenChange }: ImportGitHubDialogPro
 
   const getStepTitle = () => {
     switch (step) {
+      case 'loading':
+        return 'Import from GitHub'
       case 'check-github-app':
         return 'Install GitHub App'
       case 'select-repo':