diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 9989909253..dc9e049b0a 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -124,8 +124,8 @@ export class Refresher implements ComponentInterface {
    */
   @Event() ionStart!: EventEmitter<void>;
 
-  private checkNativeRefresher() {
-    const useNativeRefresher = shouldUseNativeRefresher(this.el, getIonMode(this));
+  private async checkNativeRefresher() {
+    const useNativeRefresher = await shouldUseNativeRefresher(this.el, getIonMode(this));
     if (useNativeRefresher && !this.nativeRefresher) {
       const contentEl = this.el.closest('ion-content');
       this.setupNativeRefresher(contentEl);
@@ -411,7 +411,7 @@ export class Refresher implements ComponentInterface {
     this.scrollEl = await contentEl.getScrollElement();
     this.backgroundContentEl = getElementRoot(contentEl).querySelector('#background-content') as HTMLElement;
 
-    if (shouldUseNativeRefresher(this.el, getIonMode(this))) {
+    if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
       this.setupNativeRefresher(contentEl);
     } else {
       this.gesture = (await import('../../utils/gesture')).createGesture({
diff --git a/core/src/components/refresher/refresher.utils.ts b/core/src/components/refresher/refresher.utils.ts
index 9c7b3154b7..44b277803a 100644
--- a/core/src/components/refresher/refresher.utils.ts
+++ b/core/src/components/refresher/refresher.utils.ts
@@ -166,9 +166,14 @@ export const translateElement = (el?: HTMLElement, value?: string) => {
 // Utils
 // -----------------------------
 
-export const shouldUseNativeRefresher = (referenceEl: HTMLIonRefresherElement, mode: string) => {
-  const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
-  const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
+export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElement, mode: string) => {
+  const refresherContent = referenceEl.querySelector('ion-refresher-content');
+  if (!refresherContent) { return Promise.resolve(false); }
+
+  await refresherContent.componentOnReady();
+
+  const pullingSpinner = refresherContent.querySelector('.refresher-pulling ion-spinner');
+  const refreshingSpinner = refresherContent.querySelector('.refresher-refreshing ion-spinner');
 
   return (
     pullingSpinner !== null &&