Skip to content
Permalink
Browse files

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
  • Loading branch information...
abennouna authored and brandyscarney committed Mar 15, 2019
1 parent b5a393b commit 9c48fa715d663d36577a449cc86775433d309b5b
@@ -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')
);
}
}
@@ -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>
@@ -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>
@@ -18,8 +18,8 @@

<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
loading-spinner="bubbles"
loading-text="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
@@ -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>

@@ -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')
);
}
}

@@ -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')
);
}
}

@@ -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>

0 comments on commit 9c48fa7

Please sign in to comment.
You can’t perform that action at this time.