fix(spinner): fix default spinner logic for relevant components (#17660)

- In the **`loading`** component, fallback to `spinner` icon config before platform default.
- In both **`refresher`** & **`infinite-scroll`** components, use platform default as final fallback.
- In **`infinite-scroll`** test templates, and the _basic_ **`virtual-scroll`** test template, fix loading _spinner_ and _text_ attributes.

fixes #17659

core/src/components/infinite-scroll-content/infinite-scroll-content.tsx

@@ -30,7 +30,7 @@ export class InfiniteScrollContent implements ComponentInterface {
     if (this.loadingSpinner === undefined) {
       this.loadingSpinner = this.config.get(
         'infiniteLoadingSpinner',
-        this.config.get('spinner', 'lines')
+        this.config.get('spinner', this.mode === 'ios' ? 'lines' : 'crescent')
       );
     }
   }

core/src/components/infinite-scroll/test/basic/index.html

@@ -30,7 +30,7 @@
       <ion-list id="list"></ion-list>
 
       <ion-infinite-scroll threshold="100px" id="infinite-scroll">
-        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
+        <ion-infinite-scroll-content loading-spinner="crescent" loading-text="Loading more data...">
         </ion-infinite-scroll-content>
       </ion-infinite-scroll>
     </ion-content>

core/src/components/infinite-scroll/test/preview/index.html

@@ -30,7 +30,7 @@
       </ion-list>
 
       <ion-infinite-scroll threshold="100px" id="infinite-scroll">
-        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
+        <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
         </ion-infinite-scroll-content>
       </ion-infinite-scroll>
     </ion-content>

core/src/components/infinite-scroll/test/standalone/index.html

@@ -18,8 +18,8 @@
 
     <ion-infinite-scroll threshold="100px" id="infinite-scroll">
       <ion-infinite-scroll-content
-        loadingSpinner="bubbles"
+        loading-spinner="bubbles"
-        loadingText="Loading more data...">
+        loading-text="Loading more data...">
       </ion-infinite-scroll-content>
     </ion-infinite-scroll>
   </ion-content>

core/src/components/infinite-scroll/test/top/index.html

@@ -24,7 +24,7 @@
     <ion-content id="content" padding>
 
       <ion-infinite-scroll threshold="100px" id="infinite-scroll" position="top">
-        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
+        <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
         </ion-infinite-scroll-content>
       </ion-infinite-scroll>
 

core/src/components/loading/loading.tsx

@@ -113,7 +113,10 @@ export class Loading implements ComponentInterface, OverlayInterface {
 
   componentWillLoad() {
     if (this.spinner === undefined) {
-      this.spinner = this.config.get('loadingSpinner', this.mode === 'ios' ? 'lines' : 'crescent');
+      this.spinner = this.config.get(
+        'loadingSpinner',
+        this.config.get('spinner', this.mode === 'ios' ? 'lines' : 'crescent')
+      );
     }
   }
 

core/src/components/refresher-content/refresher-content.tsx

@@ -1,12 +1,14 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';
 
-import { Config, SpinnerTypes } from '../../interface';
+import { Config, Mode, SpinnerTypes } from '../../interface';
 
 @Component({
   tag: 'ion-refresher-content'
 })
 export class RefresherContent implements ComponentInterface {
 
+  mode!: Mode;
+
   @Prop({ context: 'config' }) config!: Config;
 
   /**
@@ -34,7 +36,10 @@ export class RefresherContent implements ComponentInterface {
       this.pullingIcon = this.config.get('refreshingIcon', 'arrow-down');
     }
     if (this.refreshingSpinner === undefined) {
-      this.refreshingSpinner = this.config.get('refreshingSpinner', this.config.get('spinner', 'lines'));
+      this.refreshingSpinner = this.config.get(
+        'refreshingSpinner',
+        this.config.get('spinner', this.mode === 'ios' ? 'lines' : 'crescent')
+      );
     }
   }
 

core/src/components/virtual-scroll/test/basic/index.html

@@ -42,7 +42,7 @@
       </ion-virtual-scroll>
 
       <ion-infinite-scroll threshold="100px" id="infinite-scroll">
-        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
+        <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
         </ion-infinite-scroll-content>
       </ion-infinite-scroll>