diff --git a/examples/nuxt-app/test/features/maps/maps.feature b/examples/nuxt-app/test/features/maps/maps.feature
index 1dd8c8283c..19e28667a3 100644
--- a/examples/nuxt-app/test/features/maps/maps.feature
+++ b/examples/nuxt-app/test/features/maps/maps.feature
@@ -14,6 +14,16 @@ Feature: Custom collection map component
       | method | status |
       | GET    | 200    |
 
+  @mockserver
+  Scenario: A loading screen is shown while the map loads
+    Given I load the page fixture with "/maps/basic-page"
+    And the page endpoint for path "/map" returns fixture "/maps/basic-page" with status 200
+    And the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is delayed by 500 milliseconds and stubbed with fixture "/site/search-response", status 200 and alias "searchReq"
+    Given I visit the page "/map"
+    Then the map loading screen should be displayed
+    When I wait 500 milliseconds
+    Then the map should be displayed
+
   @mockserver
   Scenario: Popup - 'popover' type
     Given I load the page fixture with "/maps/basic-page"
diff --git a/examples/nuxt-app/test/features/search-listing/events.feature b/examples/nuxt-app/test/features/search-listing/events.feature
index aabcc0c638..b95c6df974 100644
--- a/examples/nuxt-app/test/features/search-listing/events.feature
+++ b/examples/nuxt-app/test/features/search-listing/events.feature
@@ -6,7 +6,7 @@ Feature: Events collection
   @mockserver
   Example: Results formatting
     Given the page endpoint for path "/events" returns fixture "/search-listing/events/page" with status 200
-    And the search network request is stubbed with fixture "/search-listing/events/response", status 200 and delayed by 400 milliseconds
+    And the search network request is stubbed with fixture "/search-listing/events/response" and status 200
     When I visit the page "/events"
     Then the search listing page should have 2 results
     And the search listing layout should be "grid"
diff --git a/examples/nuxt-app/test/features/search-listing/filters.feature b/examples/nuxt-app/test/features/search-listing/filters.feature
index a664b98e28..8471501127 100644
--- a/examples/nuxt-app/test/features/search-listing/filters.feature
+++ b/examples/nuxt-app/test/features/search-listing/filters.feature
@@ -389,8 +389,10 @@ Feature: Search listing - Filter
     And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
 
     When I visit the page "/"
-    And I type "The" into the search input
-    And I click the search button
+    And I toggle the search listing filters section
+    And I click the search listing dropdown field labelled "Terms filter example"
+    Then I click the option labelled "Purple" in the selected dropdown
+    And I submit the search filters
     Then I should be scrolled to the search results
 
   @mockserver
@@ -401,7 +403,8 @@ Feature: Search listing - Filter
     Then the page endpoint for path "/" returns the loaded fixture
 
     When I visit the page "/"
-    And I type "The" into the search input
-    And I click the search button
-
+    And I toggle the search listing filters section
+    And I click the search listing dropdown field labelled "Terms filter example"
+    Then I click the option labelled "Purple" in the selected dropdown
+    And I submit the search filters
     Then I should not be scrolled to the search results
diff --git a/examples/nuxt-app/test/features/search-listing/grants.feature b/examples/nuxt-app/test/features/search-listing/grants.feature
index 63960e055c..b03dc7ac4c 100644
--- a/examples/nuxt-app/test/features/search-listing/grants.feature
+++ b/examples/nuxt-app/test/features/search-listing/grants.feature
@@ -10,7 +10,7 @@ Feature: Grants collection
   @mockserver
   Example: Results formatting
     Given the page endpoint for path "/grants" returns fixture "/search-listing/grants/page" with status 200
-    And the search network request is stubbed with fixture "/search-listing/grants/response", status 200 and delayed by 400 milliseconds
+    And the search network request is stubbed with fixture "/search-listing/grants/response" and status 200
     And the current date is "Fri, 02 Feb 2050 03:04:05 GMT"
     When I visit the page "/grants"
     Then the search listing page should have 3 results
diff --git a/examples/nuxt-app/test/features/search-listing/result-items.feature b/examples/nuxt-app/test/features/search-listing/result-items.feature
index 1ec8437e0d..69f91e0454 100644
--- a/examples/nuxt-app/test/features/search-listing/result-items.feature
+++ b/examples/nuxt-app/test/features/search-listing/result-items.feature
@@ -7,7 +7,7 @@ Feature: Result items
   @mockserver
   Example: Result item type can be set per result
     Given the page endpoint for path "/search-results" returns fixture "/search-listing/result-items/page" with status 200
-    And the search network request is stubbed with fixture "/search-listing/result-items/response", status 200 and delayed by 400 milliseconds
+    And the search network request is stubbed with fixture "/search-listing/result-items/response" and status 200
 
     When I visit the page "/search-results"
     Then the search listing page should have 4 results
diff --git a/examples/nuxt-app/test/features/search-listing/table.feature b/examples/nuxt-app/test/features/search-listing/table.feature
index 74867b558f..d338bbf87a 100644
--- a/examples/nuxt-app/test/features/search-listing/table.feature
+++ b/examples/nuxt-app/test/features/search-listing/table.feature
@@ -34,7 +34,7 @@ Feature: Table layout
   @mockserver
   Example: Table shows extra content using a custom component
     Given the page endpoint for path "/search-listing-table-extra-components" returns fixture "/search-listing/table/page-extra-component" with status 200
-    And the search network request is stubbed with fixture "/search-listing/table/response", status 200 and delayed by 400 milliseconds
+    And the search network request is stubbed with fixture "/search-listing/table/response" and status 200
     When I visit the page "/search-listing-table-extra-components"
     And the search network request should be called with the "/search-listing/table/request" fixture
     And the search listing layout should be "table"
@@ -48,7 +48,7 @@ Feature: Table layout
   @mockserver
   Example: Table shows extra structured content using object keys and components
     Given the page endpoint for path "/search-listing-table-structured" returns fixture "/search-listing/table/page-extra-structured" with status 200
-    And the search network request is stubbed with fixture "/search-listing/table/response-elastic", status 200 and delayed by 400 milliseconds
+    And the search network request is stubbed with fixture "/search-listing/table/response-elastic" and status 200
     When I visit the page "/search-listing-table-structured"
     And the search network request should be called with the "/search-listing/table/request" fixture
     And the search listing layout should be "table"
@@ -67,7 +67,7 @@ Feature: Table layout
   @mockserver
   Example: Table renders cells using core components
     Given the page endpoint for path "/search-listing-table-structured" returns fixture "/search-listing/table/page-extra-structured" with status 200
-    And the search network request is stubbed with fixture "/search-listing/table/response-elastic", status 200 and delayed by 400 milliseconds
+    And the search network request is stubbed with fixture "/search-listing/table/response-elastic" and status 200
     When I visit the page "/search-listing-table-structured"
     And the search network request should be called with the "/search-listing/table/request" fixture
 
diff --git a/examples/nuxt-app/test/features/site/search.feature b/examples/nuxt-app/test/features/site/search.feature
index 1f6de61747..a860445d10 100644
--- a/examples/nuxt-app/test/features/site/search.feature
+++ b/examples/nuxt-app/test/features/site/search.feature
@@ -5,11 +5,19 @@ Feature: Site search
 
   @mockserver
   Example: Display and manage site search results
-    Given the "/api/tide/search/**" network request is stubbed with fixture "/site/search-response" and status 200 as alias "siteSearchReq"
+    Given the "/api/tide/search/**" network request is delayed by 500 milliseconds and stubbed with fixture "/site/search-response", status 200 and alias "siteSearchReq"
     When I visit the page "/search?q=demo"
+    Then the search listing skeleton should display 10 items with the class "tide-search-result-skeleton"
+
+    When I wait 500 milliseconds
     Then the search listing page should have 5 results
     And the filters toggle should show 0 applied filters
     And the search input should have the value "demo"
+    And the search listing results count should read "Displaying 1-5 of 5 results"
+    And the search listing results should have following items:
+      | title                                                 | content                                                                                                                  | url                                                      | component         |
+      | TAFE and training providers in Melbourne’s south-east | Explore local TAFE and training providers across Melbourne’s south-eastern region                                        | /tafes-training-providers-melbourne-south-eastern-region | rpl-search-result |
+      | Time for a career change?                             | With TAFE, it's now easier than ever to learn new skills for your chosen career or retrain to get the job of your dreams | /career-change                                           | rpl-search-result |
 
     When I toggle the search listing filters section
     And I click the search listing dropdown field labelled "Select a topic"
diff --git a/examples/nuxt-app/test/fixtures/site/search-response.json b/examples/nuxt-app/test/fixtures/site/search-response.json
index 06f039e04c..a6c9a92e79 100644
--- a/examples/nuxt-app/test/fixtures/site/search-response.json
+++ b/examples/nuxt-app/test/fixtures/site/search-response.json
@@ -10,7 +10,7 @@
     "page": {
       "current": 1,
       "total_pages": 1,
-      "total_results": 4,
+      "total_results": 5,
       "size": 10
     },
     "request_id": "3940dd8bb5a8a54484a2487ffb5fa272"
diff --git a/packages/ripple-test-utils/step_definitions/common/mocks.ts b/packages/ripple-test-utils/step_definitions/common/mocks.ts
index 15a1bec8e2..dc60b3a77a 100644
--- a/packages/ripple-test-utils/step_definitions/common/mocks.ts
+++ b/packages/ripple-test-utils/step_definitions/common/mocks.ts
@@ -174,8 +174,8 @@ Given(
       (req) => {
         if (req.body.size === 0) {
           req.reply({
-            statusCode: status,
-            fixture: fixture
+            statusCode,
+            fixture
           })
         } else {
           req.alias = 'searchReq'
@@ -209,6 +209,31 @@ Given(
     })
   }
 )
+
+Given(
+  'the {string} network request is delayed by {int} milliseconds and stubbed with fixture {string}, status {int} and alias {string}',
+  (
+    url: string,
+    delay: number,
+    fixture: string,
+    statusCode: number,
+    alias: string
+  ) => {
+    cy.intercept('POST', url, (req) => {
+      if (req.body.size === 0) {
+        req.reply({})
+      } else {
+        req.alias = alias
+        req.reply({
+          statusCode,
+          fixture,
+          delay
+        })
+      }
+    })
+  }
+)
+
 Given(
   'the {string} aggregation request is stubbed with fixture {string} and status {int} as alias {string}',
   (url: string, fixture: string, status: number, alias: string) => {
diff --git a/packages/ripple-test-utils/step_definitions/components/maps.ts b/packages/ripple-test-utils/step_definitions/components/maps.ts
index effc223d3d..665359701c 100644
--- a/packages/ripple-test-utils/step_definitions/components/maps.ts
+++ b/packages/ripple-test-utils/step_definitions/components/maps.ts
@@ -65,6 +65,14 @@ Then(`the map matches the image snapshot {string}`, (title) => {
   })
 })
 
+Then(`the map loading screen should be displayed`, () => {
+  cy.get('.tide-search-listing-results-map-skeleton').should('be.visible')
+})
+
+Then(`the map should be displayed`, () => {
+  cy.get('.rpl-map').should('be.visible')
+})
+
 When(
   `I click the map component at coordinates {int} {int}`,
   (x: number, y: number) => {
diff --git a/packages/ripple-tide-search/components/TideSearchListingPage.vue b/packages/ripple-tide-search/components/TideSearchListingPage.vue
index 630b4f30df..bac2d6ddda 100644
--- a/packages/ripple-tide-search/components/TideSearchListingPage.vue
+++ b/packages/ripple-tide-search/components/TideSearchListingPage.vue
@@ -235,7 +235,9 @@ const handleSearchSubmit = (event: any) => {
   } else {
     // If there's no filters in the form, we need to just do the search without submitting the filter form
     submitSearch()
-    scrollToResults(resultsContainer)
+    if (event?.type === 'button') {
+      scrollToResults(resultsContainer)
+    }
     emitSearchEvent({ ...event, ...baseEvent() })
   }
 }
@@ -243,7 +245,13 @@ const handleSearchSubmit = (event: any) => {
 const handleFilterSubmit = (event: any) => {
   filterForm.value = event.value
   submitSearch()
-  scrollToResults(resultsContainer)
+
+  if (
+    !cachedSubmitEvent.value?.type ||
+    cachedSubmitEvent.value?.type === 'button'
+  ) {
+    scrollToResults(resultsContainer)
+  }
 
   emitSearchEvent({ ...event, ...cachedSubmitEvent.value, ...baseEvent() })
 
diff --git a/packages/ripple-tide-search/components/TideSearchPage.vue b/packages/ripple-tide-search/components/TideSearchPage.vue
index ca16ee4749..9b74b231d4 100644
--- a/packages/ripple-tide-search/components/TideSearchPage.vue
+++ b/packages/ripple-tide-search/components/TideSearchPage.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { getActiveFilterURL, useRuntimeConfig, useTideSite } from '#imports'
+import {
+  getActiveFilterURL,
+  scrollToElementTopWithOffset,
+  useRuntimeConfig,
+  useTideSite
+} from '#imports'
 import useSearchUI from './../composables/useSearchUI'
 import {
   AppSearchFilterConfigItem,
@@ -17,12 +22,14 @@ interface Props {
   filtersConfig: AppSearchFilterConfigItem[]
   searchDriverOptions: Omit<SearchDriverOptions, 'apiConnector'>
   searchResultsMappingFn: (item: any) => MappedSearchResult<any>
+  scrollToResults: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   id: 'tide-search-page',
   pageTitle: 'Search',
   filtersConfig: () => [],
+  scrollToResults: true,
   searchDriverOptions: () => ({
     initialState: { resultsPerPage: 10 },
     alwaysSearchOnInitialLoad: true,
@@ -100,6 +107,7 @@ const {
   props.searchResultsMappingFn
 )
 
+const initialLoad = ref(true)
 const filtersExpanded = ref(false)
 const submitFiltersLabel = 'Apply search filters'
 
@@ -133,15 +141,29 @@ const emitSearchEvent = (event) => {
   )
 }
 
+const scrollToResults = () => {
+  if (props.scrollToResults) {
+    const scrollToElement = document.querySelector('.rpl-layout__body-wrap')
+
+    if (scrollToElement) {
+      scrollToElementTopWithOffset(scrollToElement)
+    }
+  }
+}
+
 const handleSubmit = (event) => {
   doSearch()
-
   emitSearchEvent(event)
+
+  if (event?.type === 'button') {
+    scrollToResults()
+  }
 }
 
 const handleFilterSubmit = (event) => {
   filterFormValues.value = event.data
   doSearch()
+  scrollToResults()
 
   emitSearchEvent({ ...event, text: submitFiltersLabel, type: 'button' })
 }
@@ -201,6 +223,19 @@ const handlePagination = (event) => {
   )
 }
 
+const displayResults = computed(() => {
+  if (loading.value) {
+    return Array(props.searchDriverOptions?.initialState?.resultsPerPage).fill({
+      id: 'skeleton',
+      component: 'TideSearchResultSkeleton'
+    })
+  }
+
+  return results.value?.length ? results.value : []
+})
+
+const loading = computed(() => initialLoad.value || searchState.value.isLoading)
+
 watch(
   () => searchState.value.isLoading,
   (loading, prevLoading) => {
@@ -213,6 +248,8 @@ watch(
         },
         { global: true }
       )
+
+      initialLoad.value = false
     }
   }
 )
@@ -291,12 +328,13 @@ watch(
       </RplHeroHeader>
     </template>
     <template #body>
-      <RplPageComponent v-if="!searchState.error && searchState.totalResults">
+      <RplPageComponent v-if="!searchState.error">
         <TideSearchResultsCount
-          v-if="!searchState.error && searchState.totalResults"
           :pagingStart="searchState.pagingStart"
           :pagingEnd="searchState.pagingEnd"
           :totalResults="searchState.totalResults"
+          :results="results"
+          :loading="loading"
         />
       </RplPageComponent>
       <RplPageComponent>
@@ -305,22 +343,19 @@ watch(
             <div
               :class="{
                 'tide-search-results': true,
-                'tide-search-results--loading':
-                  searchState.isLoading && !searchState.error
+                'tide-search-results--loading': loading && !searchState.error
               }"
             >
               <TideSearchError v-if="searchState.error" />
               <TideSearchNoResults
                 v-else-if="
-                  searchComplete &&
-                  !searchState.isLoading &&
-                  !searchState.totalResults
+                  searchComplete && !loading && !searchState.totalResults
                 "
                 :query="searchState.searchTerm"
               />
               <RplResultListing v-else>
                 <RplResultListingItem
-                  v-for="(result, idx) in results"
+                  v-for="(result, idx) in displayResults"
                   :key="`result-${idx}-${result.id}`"
                   data-component-type="search-result"
                 >
diff --git a/packages/ripple-tide-search/components/TideSearchResultsCount.vue b/packages/ripple-tide-search/components/TideSearchResultsCount.vue
index 0b28d01bd2..6e8dc39ce2 100644
--- a/packages/ripple-tide-search/components/TideSearchResultsCount.vue
+++ b/packages/ripple-tide-search/components/TideSearchResultsCount.vue
@@ -19,11 +19,12 @@ interface Props {
   pagingStart: number
   pagingEnd: number
   totalResults: number
-  loading: boolean
+  loading?: boolean
   results?: any[]
 }
 
 withDefaults(defineProps<Props>(), {
-  results: () => []
+  results: () => [],
+  loading: false
 })
 </script>
diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
index ecbb581bda..fa36a418ed 100644
--- a/packages/ripple-tide-search/components/global/TideCustomCollection.vue
+++ b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -227,6 +227,9 @@ const {
 
 const uiFilters = ref(props.userFilters)
 const cachedSubmitEvent = ref({})
+// this offset is used to avoid the result count hitting
+// the top of the screen when scrolling to the results
+const scrollTopOffset = 16
 
 const baseEvent = () => ({
   contextId: props.id,
@@ -329,7 +332,9 @@ const handleSearchSubmit = (event) => {
     // If there's no filters in the form, we need to just do the search without submitting the filter form
     submitSearch()
     closeMapPopup()
-    scrollToResults(resultsContainer.value, 16)
+    if (event?.type === 'button') {
+      scrollToResults(resultsContainer.value, scrollTopOffset)
+    }
     emitSearchEvent({ ...event, ...baseEvent() })
   }
 }
@@ -338,7 +343,13 @@ const handleFilterSubmit = (event) => {
   filterForm.value = event.value
   submitSearch()
   closeMapPopup()
-  scrollToResults(resultsContainer.value, 16)
+
+  if (
+    !cachedSubmitEvent.value?.type ||
+    cachedSubmitEvent.value?.type === 'button'
+  ) {
+    scrollToResults(resultsContainer.value, scrollTopOffset)
+  }
 
   emitSearchEvent({ ...event, ...cachedSubmitEvent.value, ...baseEvent() })
 
@@ -435,7 +446,7 @@ const handleTabChange = (tab: TideSearchListingTab) => {
 
 function handleLocationSearch(payload: any) {
   locationQuery.value = payload
-  handleSearchSubmit({})
+  handleSearchSubmit({ type: 'suggestion' })
 }
 
 const rplMapRef = ref(null)
diff --git a/packages/ripple-tide-search/components/global/TideSearchResultsGrid.vue b/packages/ripple-tide-search/components/global/TideSearchResultsGrid.vue
index 04d65d13ea..c7b461f630 100644
--- a/packages/ripple-tide-search/components/global/TideSearchResultsGrid.vue
+++ b/packages/ripple-tide-search/components/global/TideSearchResultsGrid.vue
@@ -1,18 +1,22 @@
 <template>
-  <ul
-    v-if="displayResults.length"
-    data-component-type="search-listing-layout-grid"
-    class="rpl-grid"
-  >
-    <li
-      v-for="(result, idx) in displayResults"
-      :key="`result-${idx}-${result.id}`"
-      data-component-type="search-result"
-      class="tide-search-results-grid-item rpl-col-12 rpl-col-4-m"
+  <!-- We swap the element type here when loading has completed -->
+  <!-- this was best way to ensure the results correctly replace skeleton screens in cypress -->
+  <component :is="loading ? 'div' : 'section'">
+    <ul
+      v-if="displayResults.length"
+      data-component-type="search-listing-layout-grid"
+      class="rpl-grid"
     >
-      <component :is="result.component" v-bind="result.props" />
-    </li>
-  </ul>
+      <li
+        v-for="(result, idx) in displayResults"
+        :key="`result-${idx}-${result.id}`"
+        data-component-type="search-result"
+        class="tide-search-results-grid-item rpl-col-12 rpl-col-4-m"
+      >
+        <component :is="result.component" v-bind="result.props" />
+      </li>
+    </ul>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -21,13 +25,14 @@ import type { TideSearchListingResultItem } from './../../types'
 interface Props {
   results?: TideSearchListingResultItem[]
   perPage?: number
-  loading: boolean
+  loading?: boolean
   skeleton?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   results: () => [],
   perPage: 10,
+  loading: false,
   skeleton: 'TideSearchResultCardSkeleton'
 })
 
diff --git a/packages/ripple-tide-search/components/global/TideSearchResultsList.vue b/packages/ripple-tide-search/components/global/TideSearchResultsList.vue
index 81498052c3..4488f961b2 100644
--- a/packages/ripple-tide-search/components/global/TideSearchResultsList.vue
+++ b/packages/ripple-tide-search/components/global/TideSearchResultsList.vue
@@ -1,17 +1,21 @@
 <template>
-  <RplResultListing
-    v-if="displayResults.length"
-    data-component-type="search-listing-layout-list"
-    class="tide-search-result"
-  >
-    <RplResultListingItem
-      v-for="(result, idx) in displayResults"
-      :key="`result-${idx}-${result.id}`"
-      data-component-type="search-result"
+  <!-- We swap the element type here when loading has completed -->
+  <!-- this was best way to ensure the results correctly replace skeleton screens in cypress -->
+  <component :is="loading ? 'div' : 'section'">
+    <RplResultListing
+      v-if="displayResults.length"
+      data-component-type="search-listing-layout-list"
+      class="tide-search-result"
     >
-      <component :is="result.component" v-bind="result.props" />
-    </RplResultListingItem>
-  </RplResultListing>
+      <RplResultListingItem
+        v-for="(result, idx) in displayResults"
+        :key="`result-${idx}-${result.id}`"
+        data-component-type="search-result"
+      >
+        <component :is="result.component" v-bind="result.props" />
+      </RplResultListingItem>
+    </RplResultListing>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -20,13 +24,14 @@ import type { TideSearchListingResultItem } from './../../types'
 interface Props {
   results?: TideSearchListingResultItem[]
   perPage?: number
-  loading: boolean
+  loading?: boolean
   skeleton?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   results: () => [],
   perPage: 10,
+  loading: false,
   skeleton: 'TideSearchResultSkeleton'
 })
 
diff --git a/packages/ripple-tide-search/components/global/TideSearchResultsTable.vue b/packages/ripple-tide-search/components/global/TideSearchResultsTable.vue
index 867a228124..3033aaafd4 100644
--- a/packages/ripple-tide-search/components/global/TideSearchResultsTable.vue
+++ b/packages/ripple-tide-search/components/global/TideSearchResultsTable.vue
@@ -1,21 +1,25 @@
 <template>
-  <RplDataTable
-    v-if="items?.length"
-    data-component-type="search-listing-layout-table"
-    class="tide-search-listing-results-table"
-    :class="{
-      'tide-search-listing-results-table': true,
-      'tide-search-listing-results-table--mounting': !isMounted
-    }"
-    :columns="processedColumns"
-    :items="items"
-    :offset="offset"
-    :caption="caption"
-    :footer="footer"
-    :headingType="headingType"
-    :showExtraContent="showExtraContent"
-    :hasSidebar="hasSidebar"
-  />
+  <!-- We swap the element type here when loading has completed -->
+  <!-- this was best way to ensure the results correctly replace skeleton screens in cypress -->
+  <component :is="loading ? 'div' : 'section'">
+    <RplDataTable
+      v-if="items?.length"
+      data-component-type="search-listing-layout-table"
+      class="tide-search-listing-results-table"
+      :class="{
+        'tide-search-listing-results-table': true,
+        'tide-search-listing-results-table--mounting': !isMounted
+      }"
+      :columns="processedColumns"
+      :items="items"
+      :offset="offset"
+      :caption="caption"
+      :footer="footer"
+      :headingType="headingType"
+      :showExtraContent="showExtraContent"
+      :hasSidebar="hasSidebar"
+    />
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -53,7 +57,7 @@ interface Props {
   results: TideSearchListingResultItem[]
   hasSidebar?: boolean
   perPage?: number
-  loading: boolean
+  loading?: boolean
   skeleton?: string
   offset?: number
   columns: tableColumnConfig[]
@@ -66,6 +70,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   results: () => [],
+  loading: false,
   perPage: 10,
   skeleton: 'TideSearchResultTableSkeleton',
   caption: '',