fix: remove Transition component

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/pages/index/index/index.vue

@@ -212,92 +212,94 @@ const copyProjectMeta = async () => {
       </a-dropdown>
     </div>
 
-    <Transition name="layout" mode="out-in">
-      <div v-if="isLoading">
-        <a-skeleton />
-      </div>
-
-      <a-table
-        v-else
-        :custom-row="customRow"
-        :data-source="filteredProjects"
-        :pagination="{ position: ['bottomCenter'] }"
-        :table-layout="md ? 'auto' : 'fixed'"
-      >
-        <template #emptyText>
-          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
-        </template>
+    <!--
+      TODO: bring back transition after fixing the bug with navigation
+      <Transition name="layout" mode="out-in"> -->
+    <div v-if="isLoading">
+      <a-skeleton />
+    </div>
 
-        <!-- Title -->
-        <a-table-column key="title" :title="$t('general.title')" data-index="title">
-          <template #default="{ text, record }">
-            <div class="flex items-center">
-              <div @click.stop>
-                <a-menu class="!border-0 !m-0 !p-0" trigger-sub-menu-action="click">
-                  <template v-if="isUIAllowed('projectTheme')">
-                    <a-sub-menu key="theme" popup-class-name="custom-color">
-                      <template #title>
-                        <div
-                          class="color-selector"
-                          :style="{
-                            'background-color': getProjectPrimary(record),
-                            'width': '8px',
-                            'height': '100%',
-                          }"
-                        />
-                      </template>
+    <a-table
+      v-else
+      :custom-row="customRow"
+      :data-source="filteredProjects"
+      :pagination="{ position: ['bottomCenter'] }"
+      :table-layout="md ? 'auto' : 'fixed'"
+    >
+      <template #emptyText>
+        <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
+      </template>
+
+      <!-- Title -->
+      <a-table-column key="title" :title="$t('general.title')" data-index="title">
+        <template #default="{ text, record }">
+          <div class="flex items-center">
+            <div @click.stop>
+              <a-menu class="!border-0 !m-0 !p-0" trigger-sub-menu-action="click">
+                <template v-if="isUIAllowed('projectTheme')">
+                  <a-sub-menu key="theme" popup-class-name="custom-color">
+                    <template #title>
+                      <div
+                        class="color-selector"
+                        :style="{
+                          'background-color': getProjectPrimary(record),
+                          'width': '8px',
+                          'height': '100%',
+                        }"
+                      />
+                    </template>
 
-                      <template #expandIcon></template>
+                    <template #expandIcon></template>
 
-                      <LazyGeneralColorPicker
-                        :model-value="getProjectPrimary(record)"
-                        :colors="projectThemeColors"
-                        :row-size="9"
-                        :advanced="false"
-                        @input="handleProjectColor(record.id, $event)"
-                      />
+                    <LazyGeneralColorPicker
+                      :model-value="getProjectPrimary(record)"
+                      :colors="projectThemeColors"
+                      :row-size="9"
+                      :advanced="false"
+                      @input="handleProjectColor(record.id, $event)"
+                    />
 
-                      <a-sub-menu key="pick-primary">
-                        <template #title>
-                          <div class="nc-project-menu-item group !py-0">
-                            <ClarityColorPickerSolid class="group-hover:text-accent" />
-                            Custom Color
-                          </div>
-                        </template>
+                    <a-sub-menu key="pick-primary">
+                      <template #title>
+                        <div class="nc-project-menu-item group !py-0">
+                          <ClarityColorPickerSolid class="group-hover:text-accent" />
+                          Custom Color
+                        </div>
+                      </template>
 
-                        <template #expandIcon></template>
+                      <template #expandIcon></template>
 
-                        <LazyGeneralChromeWrapper @input="handleProjectColor(record.id, $event)" />
-                      </a-sub-menu>
+                      <LazyGeneralChromeWrapper @input="handleProjectColor(record.id, $event)" />
                     </a-sub-menu>
-                  </template>
-                </a-menu>
-              </div>
-              <div
-                class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2"
-              >
-                {{ text }}
-              </div>
+                  </a-sub-menu>
+                </template>
+              </a-menu>
             </div>
-          </template>
-        </a-table-column>
-        <!-- Actions -->
-
-        <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
-          <template #default="{ text, record }">
-            <div class="flex items-center gap-2">
-              <MdiEditOutline v-e="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" />
-
-              <MdiDeleteOutline
-                class="nc-action-btn"
-                :data-testid="`delete-project-${record.title}`"
-                @click.stop="deleteProject(record)"
-              />
+            <div
+              class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2"
+            >
+              {{ text }}
             </div>
-          </template>
-        </a-table-column>
-      </a-table>
-    </Transition>
+          </div>
+        </template>
+      </a-table-column>
+      <!-- Actions -->
+
+      <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
+        <template #default="{ text, record }">
+          <div class="flex items-center gap-2">
+            <MdiEditOutline v-e="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" />
+
+            <MdiDeleteOutline
+              class="nc-action-btn"
+              :data-testid="`delete-project-${record.title}`"
+              @click.stop="deleteProject(record)"
+            />
+          </div>
+        </template>
+      </a-table-column>
+    </a-table>
+    <!--    </Transition> -->
   </div>
 </template>