It adds display:none to NavigatorCard when navigator is loading

Author: marinaaisa

src/components/Navigator.vue

@@ -14,7 +14,7 @@
     class="navigator"
   >
     <NavigatorCard
-      v-if="!isFetching"
+      v-show="!isFetching"
       v-bind="technologyProps"
       :type="type"
       :children="flatChildren"
@@ -33,7 +33,7 @@
     </NavigatorCard>
     <LoadingNavigatorCard
       @close="$emit('close')"
-      v-else
+      v-if="isFetching"
     />
     <div aria-live="polite" class="visuallyhidden">
       {{ $t('navigator.navigator-is', {

tests/unit/components/Navigator.spec.js

@@ -17,6 +17,8 @@ import { INDEX_ROOT_KEY } from '@/constants/sidebar';
 
 jest.mock('docc-render/utils/throttle', () => jest.fn(v => v));
 
+const { LoadingNavigatorCard } = Navigator.components;
+
 const technology = {
   title: 'FooTechnology',
   children: [
@@ -161,6 +163,24 @@ describe('Navigator', () => {
     expect(wrapper.find('[aria-live="polite"]').text()).toBe('navigator.navigator-is navigator.state.loading');
   });
 
+  it('renders a LoadingNavigatorCard when navigator is loading', () => {
+    const wrapper = createWrapper({
+      propsData: {
+        isFetching: true,
+      },
+    });
+    expect(wrapper.find(LoadingNavigatorCard).exists()).toBe(true);
+  });
+
+  it('adds display:none to NavigatorCard when navigator is loading', () => {
+    const wrapper = createWrapper({
+      propsData: {
+        isFetching: true,
+      },
+    });
+    expect(wrapper.find(NavigatorCard).attributes('style')).toContain('display: none');
+  });
+
   it('renders an aria live that tells VO users when navigator is ready', () => {
     const wrapper = createWrapper();
     expect(wrapper.find('[aria-live="polite"]').exists()).toBe(true);