diff --git a/packages/app/src/layouts/default.vue b/packages/app/src/layouts/default.vue
index 7ac3de7e4f91..380861c49fb7 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 (currentRoute.name === 'Specs' && query.data.value) {
+    return !isRunMode && query.data.value?.currentProject?.isLoadingConfigFile === false
+  }
+
+  return !isRunMode
+})
 
 </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>