Why loading Ion-Spinner renders at bottom of page

Issue

I am trying to display a ion-spinner at the top of my page, above the main content. The spinner will display if a condition is met, where the content has not been downloaded for a remote server. However the spinner renders at the bottom of the screen, Im assuming because there is no content yet:

This is the HTML, the spinner is displayed within a div element via *ngIf directive :

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>contacts</ion-title>
  </ion-toolbar>
  
</ion-header>

<!--Spinner for serach bar-->
<div *ngIf="searching; else showContentBlock">
  <ion-spinner class="spinner-container" name="crescent" color="dark"></ion-spinner>
</div>

<!--Test from ngIf not seraching show this block-->
<ng-template #showContentBlock>

  <!--Search Bar-->
<ion-searchbar [formControl]="searchControl" (ionChange)="onSearchInput()"></ion-searchbar>
 
<ion-content class="notifications-content">
  <!-- <p>All datta : {{allDepartments}}</p>
  <p>Biochemistry : {{biochemistry}}</p> -->

  

<!--If we have general data returned-->
  <ng-container *ngIf="general">

    

    <!--General contacts-->
    <ion-item-group >

      <ion-item-divider sticky>
        <ion-label>General</ion-label>
      </ion-item-divider>
      
      <ion-item class="notification-item" lines="none" *ngFor="let contact of general; let even = even; let odd = odd" [ngClass]="{odd : odd, even: even}">
        <ion-row class="notification-item-wrapper" (click)="openContactModal(contact)">
          <ion-col size="1">
            <!-- <ion-avatar slot="start">
              <div class="avatar">
                {{contact.department.substring(0,1).toUpperCase()}}
              </div>
            </ion-avatar>  -->
             <app-aspect-ratio [ratio]="{w: 1, h: 1}">
              <app-image-shell class="notification-image" [src]="'./assets/tests/histology1.jpg'" [alt]="'conatct image'"></app-image-shell>
            </app-aspect-ratio>           
          </ion-col>
          <ion-col class="details-wrapper">
            <h2 class="details-name">{{contact.name}}</h2>
            <p class="details-description">{{contact.position}}</p>
          </ion-col>
          <ion-col size="2" class="date-wrapper" >
            <a><h3 class="notification-date" (click)="onEmailSelected(contact.email)">{{contact.email}}</h3></a>
                      
            <h3 class="notification-date" (click)="onPhoneSelected(contact.phone)"><ion-icon name="call-outline"></ion-icon>{{contact.phone}}</h3>
          </ion-col>
        </ion-row>
      </ion-item>
    </ion-item-group>

    <!--Haematology-->
    <ion-item-group>
      <ion-item-divider sticky *ngIf="showHaemDividers">
        <ion-label>
          Haematology
        </ion-label>
      </ion-item-divider>
      <ion-item class="notification-item" lines="none" *ngFor="let contact of haematology">
        <ion-row class="notification-item-wrapper" (click)="openContactModal(contact)">
          <ion-col size="1">
            <app-aspect-ratio [ratio]="{w:0.75,h:0.75}">
              <app-image-shell class="notification-image" [src]="'./assets/tests/haemIcon.jpg'"></app-image-shell>
            </app-aspect-ratio>
          </ion-col>
          <ion-col class="details-wrapper">
            <h2 class="details-name">{{contact.name}}</h2>
            <p class="details-description">{{contact.position}}</p>
          </ion-col>
          <ion-col size="2" class="date-wrapper" >
            <h3 class="notification-date" (click)="onEmailSelected(contact.email)">{{contact.email}}</h3>
            <h3 class="notification-date" (click)= "onPhoneSelected(contact.phone)">{{contact.phone}}</h3>
          </ion-col>
        </ion-row>
      </ion-item>
    </ion-item-group>

    <!--Transfusion-->
    <ion-item-group>
      <ion-item-divider sticky *ngIf="showTransfusionDivder">
        <ion-label>Transfusion</ion-label>
      </ion-item-divider>
      <ion-item class="notification-item" lines="none" *ngFor="let contact of transfusion">
        <ion-row class="notification-item-wrapper" (click)="openContactModal(contact)">
          <ion-col size="1">
            <app-aspect-ratio [ratio]="{w:1,h:1}">
              <app-image-shell class="notification-image" [src]="'./assets/tests/transfusionIcon.jpg'"></app-image-shell>
            </app-aspect-ratio>
          </ion-col>
          <ion-col class="details-wrapper">
            <h2 class="details-name">{{contact.name}}</h2>
            <p class="details-description">{{contact.position}}</p>
          </ion-col>
          <ion-col size="2" class="date-wrapper">
            <h3 class="notification-date" (click)="onEmailSelected(contact.email)">{{contact.email}}</h3>
            <h3 class="notification-date" (click)="onPhoneSelected(contact.phone)">{{contact.phone}}</h3>
          </ion-col>
        </ion-row>
      </ion-item>
    </ion-item-group>


    <!--Microbiology-->
    <ion-item-group>
      <ion-item-divider sticky *ngIf="showMicrobiologyDivider">
        <ion-label>
          Microbiology
        </ion-label>
      </ion-item-divider>
      <ion-item class="notification-item" lines="none" *ngFor="let contact of microbiology">
        <ion-row class="notification-item-wrapper" (click)="openContactModal(contact)">
          <ion-col size="1">
            <app-aspect-ratio [ratio]="{w:1,h:1}">
              <app-image-shell class="notification-image" [src]="'./assets/tests/microIcon.jpg'"></app-image-shell>
            </app-aspect-ratio>
          </ion-col>
          <ion-col class="details-wrapper">
            <h2 class="details-name">{{contact.name}}</h2>
            <p class="details-description">{{contact.position}}</p>
          </ion-col>
          <ion-col size="2" class="date-wrapper" (click)="onEmailSelected(contact.email)">
            <h3  class="notification-date" (click)="onEmailSelected(contact.email)">{{contact.email}}</h3>
            <h3 class="notification-date" (click)="onPhoneSelected(contact.phone)">{{contact.phone}}</h3>
          </ion-col>
        </ion-row>
      </ion-item>
    </ion-item-group>

     <!--Immunology-->
     <ion-item-group>
      <ion-item-divider sticky>
        <ion-label>
          Immunology
        </ion-label>
      </ion-item-divider>
      <ion-item class="notification-item" lines="none" *ngFor="let contact of immunology">
        <ion-row class="notification-item-wrapper" (click)="openContactModal(contact)">
          <ion-col size="1">
            <app-aspect-ratio [ratio]="{w:1,h:1}">
              <app-image-shell class="notification-image" [src]="'./assets/tests/chemistryIcon.jpg'"></app-image-shell>
            </app-aspect-ratio>
          </ion-col>
          <ion-col class="details-wrapper">
            <h2 class="details-name">{{contact.name}}</h2>
            <p class="details-description">{{contact.position}}</p>
          </ion-col>
          <ion-col size="2" class="date-wrapper" >
            <h3 class="notification-date" (click)="onEmailSelected(contact.email)">{{contact.email}}</h3>
            <h3 class="notification-date" (click) = "onPhoneSelected(contact.phone)">{{contact.phone}}</h3>
          </ion-col>
        </ion-row>
      </ion-item>
    </ion-item-group>

 <!--Histology-->
 <ion-item-group>
  <ion-item-divider sticky *ngIf="showHistoDividers">
    <ion-label>
      Histology
    </ion-label>
  </ion-item-divider>
  <ion-item class="notification-item" lines="none" *ngFor="let contact of histology">
    <ion-row class="notification-item-wrapper" (click)="openContactModal(contact)">
      <ion-col size="1">
        <app-aspect-ratio [ratio]="{w:1,h:1}">
          <app-image-shell class="notification-image" [src]="'./assets/tests/histology2.jpg'"></app-image-shell>
        </app-aspect-ratio>
      </ion-col>
      <ion-col class="details-wrapper">
        <h2 class="details-name">{{contact.name}}</h2>
        <p class="details-description">{{contact.position}}</p>
      </ion-col>
      <ion-col size="2" class="date-wrapper" >
        <h3 class="notification-date" (click)="onEmailSelected(contact.email)">{{contact.email}}</h3>
        <h3 class="notification-date" (click) = "onPhoneSelected(contact.phone)">{{contact.phone}}</h3>
      </ion-col>
    </ion-row>
  </ion-item>
</ion-item-group>

    

  </ng-container>
</ion-content>
</ng-template>

My question is how do I render the ion-spinner at the top of the page?

Solution

Add the spinner inside the <ion-content> tag. It should look like this

    <ion-header>
        ...
    </ion-header>

    <ion-content>

       <div *ngIf="searching; else showContentBlock">
         <ion-spinner class="spinner-container" name="crescent" color="dark"></ion-spinner>
       </div>

       <!--Test from ngIf not seraching show this block-->
       <ng-template #showContentBlock>
       
       ....

    </ion-content>

Answered By - Callan