From d0810f89eb4e43aa40c4e6340e940026ad9b86bf Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Tue, 6 Jun 2023 10:04:20 -0700
Subject: [PATCH 1/5] chore: minor improvements to UI when loading Cypress in
 open mode

---
 packages/app/src/layouts/default.vue           |  8 +++++++-
 .../app/src/navigation/SidebarNavigation.vue   |  1 -
 .../src/navigation/SidebarNavigationHeader.vue | 18 +++++++++++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/layouts/default.vue b/packages/app/src/layouts/default.vue
index 7ac3de7e4f91..ff8c5411f894 100644
--- a/packages/app/src/layouts/default.vue
+++ b/packages/app/src/layouts/default.vue
@@ -110,6 +110,12 @@ const resetErrorAndLoadConfig = (id: string) => {
   }
 }
 
-const renderSidebar = !isRunMode
+const renderSidebar = computed(() => {
+  if (!isRunMode) {
+    return query.data.value?.currentProject?.isLoadingConfigFile === false
+  }
+
+  return false
+})
 
 </script>
diff --git a/packages/app/src/navigation/SidebarNavigation.vue b/packages/app/src/navigation/SidebarNavigation.vue
index 31e6be1c8790..569db38ce1dc 100644
--- a/packages/app/src/navigation/SidebarNavigation.vue
+++ b/packages/app/src/navigation/SidebarNavigation.vue
@@ -28,7 +28,6 @@
     </button>
     <div class="flex flex-col flex-1 ">
       <SidebarNavigationHeader
-        v-if="props.gql"
         :gql="props.gql"
         :is-nav-bar-expanded="isNavBarExpanded"
       />
diff --git a/packages/app/src/navigation/SidebarNavigationHeader.vue b/packages/app/src/navigation/SidebarNavigationHeader.vue
index 3de96fe5cfbe..b902ca9cc3cf 100644
--- a/packages/app/src/navigation/SidebarNavigationHeader.vue
+++ b/packages/app/src/navigation/SidebarNavigationHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <Tooltip
-    v-if="testingType"
+    v-if="testingType && props.gql"
     placement="right"
     :disabled="isNavBarExpanded"
     :distance="8"
@@ -46,6 +46,17 @@
       </div>
     </template>
   </Tooltip>
+  <div
+    v-else
+    class="border-b flex shrink-0 border-gray-900 h-[64px] pl-[20px] items-center"
+  >
+    <IconLoading
+      name="loading"
+      stroke-color="indigo-700"
+      fill-color="indigo-300"
+      class="shrink-0 h-[24px] mr-[20px] w-[24px] animate-spin"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -56,6 +67,7 @@ import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import SwitchTestingTypeModal from './SwitchTestingTypeModal.vue'
 import IconE2E from '~icons/cy/testing-type-e2e-solid-simple'
 import IconComponent from '~icons/cy/testing-type-component-solid_x24'
+import { IconLoading } from '@cypress-design/vue-icon'
 import { useI18n } from '@cy/i18n'
 import { SidebarNavigationHeaderBranchChangeDocument } from '../generated/graphql-test'
 
@@ -87,7 +99,7 @@ useSubscription({ query: SidebarNavigationHeaderBranchChangeDocument })
 const showModal = ref(false)
 
 const props = defineProps<{
-  gql: SidebarNavigationHeaderFragment
+  gql?: SidebarNavigationHeaderFragment
   isNavBarExpanded: boolean
 }>()
 
@@ -103,7 +115,7 @@ const TESTING_TYPE_MAP = {
 } as const
 
 const testingType = computed(() => {
-  return props.gql.currentProject?.currentTestingType ? TESTING_TYPE_MAP[props.gql.currentProject.currentTestingType] : null
+  return props.gql?.currentProject?.currentTestingType ? TESTING_TYPE_MAP[props.gql?.currentProject.currentTestingType] : null
 })
 
 </script>

From 34f9f7cd4f50b1040f551932838f0788143b93cc Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Tue, 6 Jun 2023 10:09:07 -0700
Subject: [PATCH 2/5] [run ci]


From ef89955f8cd5923517745beeb95a406aa1e34436 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Tue, 6 Jun 2023 10:53:58 -0700
Subject: [PATCH 3/5] fix tests

---
 packages/app/src/layouts/default.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/layouts/default.vue b/packages/app/src/layouts/default.vue
index ff8c5411f894..380861c49fb7 100644
--- a/packages/app/src/layouts/default.vue
+++ b/packages/app/src/layouts/default.vue
@@ -111,11 +111,11 @@ const resetErrorAndLoadConfig = (id: string) => {
 }
 
 const renderSidebar = computed(() => {
-  if (!isRunMode) {
-    return query.data.value?.currentProject?.isLoadingConfigFile === false
+  if (currentRoute.name === 'Specs' && query.data.value) {
+    return !isRunMode && query.data.value?.currentProject?.isLoadingConfigFile === false
   }
 
-  return false
+  return !isRunMode
 })
 
 </script>

From 0edded7830308122205eaa2b5e1acbe6ba189ef8 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Wed, 7 Jun 2023 15:28:23 -0700
Subject: [PATCH 4/5] feedback

---
 packages/app/src/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/layouts/default.vue b/packages/app/src/layouts/default.vue
index 380861c49fb7..136a18f23ff6 100644
--- a/packages/app/src/layouts/default.vue
+++ b/packages/app/src/layouts/default.vue
@@ -111,7 +111,7 @@ const resetErrorAndLoadConfig = (id: string) => {
 }
 
 const renderSidebar = computed(() => {
-  if (currentRoute.name === 'Specs' && query.data.value) {
+  if (currentRoute.name === 'Specs') {
     return !isRunMode && query.data.value?.currentProject?.isLoadingConfigFile === false
   }
 

From b1311ed43ace08f1cdae025abadb9d0490cf8d31 Mon Sep 17 00:00:00 2001
From: astone123 <adams@cypress.io>
Date: Thu, 8 Jun 2023 07:19:24 -0700
Subject: [PATCH 5/5] add condition back

---
 packages/app/src/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/layouts/default.vue b/packages/app/src/layouts/default.vue
index 136a18f23ff6..380861c49fb7 100644
--- a/packages/app/src/layouts/default.vue
+++ b/packages/app/src/layouts/default.vue
@@ -111,7 +111,7 @@ const resetErrorAndLoadConfig = (id: string) => {
 }
 
 const renderSidebar = computed(() => {
-  if (currentRoute.name === 'Specs') {
+  if (currentRoute.name === 'Specs' && query.data.value) {
     return !isRunMode && query.data.value?.currentProject?.isLoadingConfigFile === false
   }