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

import { Component, Prop } from '@stencil/core';
import { Config } from '../../index';


@Component({
  tag: 'ion-infinite-scroll-content',
  styleUrls: {
    ios: 'infinite-scroll-content.ios.scss',
    md: 'infinite-scroll-content.md.scss'
  },
  host: {
    theme: 'infinite-scroll-content'
  }
})
export class InfiniteScrollContent {

  @Prop({ context: 'config' }) config!: Config;

  /**
   * An animated SVG spinner that shows while loading.
   */
  @Prop({ mutable: true }) loadingSpinner?: string;

  /**
   * Optional text to display while loading.
   */
  @Prop() loadingText?: string;


  componentDidLoad() {
    if (!this.loadingSpinner) {
      this.loadingSpinner = this.config.get('infiniteLoadingSpinner', this.config.get('spinner', 'lines'));
    }
  }

  render() {
    return (
      <div class="infinite-loading">
        {this.loadingSpinner &&
          <div class="infinite-loading-spinner">
            <ion-spinner name={this.loadingSpinner}></ion-spinner>
          </div>
        }
        {this.loadingText &&
          <div class="infinite-loading-text" innerHTML={this.loadingText}></div>
        }
      </div>
    );
  }
}