Prevent issues when storing the top offset in AdjustableSidebarWidth (#826)

Moving the placeholder element helps resolve an issue where an offset
for the navigator may be incorrectly calculated when the initial loading placeholder is
still on-screen, since it takes up the full viewport height.

Resolves: rdar://128197719

Co-authored-by: Hanqing Huang <[email protected]>

Author: marinaaisa

src/App.vue

@@ -15,14 +15,14 @@
   >
     <div :id="AppTopID" />
     <a href="#main" id="skip-nav" v-if="!isTargetIDE">{{ $t('accessibility.skip-navigation') }}</a>
-    <InitialLoadingPlaceholder />
     <slot name="header" :isTargetIDE="isTargetIDE">
       <SuggestLang v-if="enablei18n" />
       <!-- Render the custom header by default, if there is no content in the `header` slot -->
       <custom-header v-if="hasCustomHeader" :data-color-scheme="preferredColorScheme" />
     </slot>
     <!-- The nav sticky anchor has to always be between the Header and the Content -->
     <div :id="baseNavStickyAnchorId" />
+    <InitialLoadingPlaceholder />
     <slot :isTargetIDE="isTargetIDE">
       <router-view class="router-content" />
       <custom-footer v-if="hasCustomFooter" :data-color-scheme="preferredColorScheme" />

tests/unit/App.spec.js

@@ -180,19 +180,34 @@ describe('App', () => {
     expect(wrapper.find(LocaleSelector).exists()).toBe(false);
   });
 
-  it('renders the `#nav-sticky-anchor` between the header and the content', () => {
+  it('renders the `#nav-sticky-anchor` between the header and loading placeholder', () => {
     const wrapper = createWrapper({
       slots: {
         header: '<div class="header">Footer</div>',
-        default: '<div class="default">Default</div>',
       },
     });
     const header = wrapper.find('.header');
-    const content = wrapper.find('.default');
     const stickyAnchor = wrapper.find(`#${baseNavStickyAnchorId}`);
+    const loadingPlaceholder = wrapper.find(InitialLoadingPlaceholder);
+
     // make sure the anchor is below the header and above the content
     expect(header.element.nextElementSibling).toBe(stickyAnchor.element);
-    expect(stickyAnchor.element.nextElementSibling).toBe(content.element);
+    expect(stickyAnchor.element.nextElementSibling).toBe(loadingPlaceholder.element);
+  });
+
+  it('renders an `InitialLoadingPlaceholder` between the anchor and the content', () => {
+    const wrapper = createWrapper({
+      slots: {
+        default: '<div class="default">Default</div>',
+      },
+    });
+    const stickyAnchor = wrapper.find(`#${baseNavStickyAnchorId}`);
+    const content = wrapper.find('.default');
+    const placeholder = wrapper.find(InitialLoadingPlaceholder);
+    // make sure the anchor is below the header and above the content
+    expect(placeholder.exists()).toBe(true);
+    expect(stickyAnchor.element.nextElementSibling).toBe(placeholder.element);
+    expect(placeholder.element.nextElementSibling).toBe(content.element);
   });
 
   it('exposes a footer slot', () => {
@@ -216,12 +231,6 @@ describe('App', () => {
     expect(wrapper.find('router-view-stub').exists()).toBe(false);
   });
 
-  it('renders an `InitialLoadingPlaceholder`', () => {
-    const wrapper = createWrapper();
-
-    expect(wrapper.find(InitialLoadingPlaceholder).exists()).toBe(true);
-  });
-
   it('renders a default `Footer` for non-IDE targets', () => {
     const wrapper = createWrapper();
     expect(wrapper.contains(Footer)).toBe(true);