Mobile Development with Ionic and React — Popovers and Loading Indicators

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Popovers

We can add popovers with the IonPopover component.

For example, we can write:

import React, { useState } from 'react';
import { IonButton, IonContent, IonPopover } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <IonContent>
      <IonPopover
        isOpen={showPopover}
        cssClass='my-custom-class'
        onDidDismiss={e => setShowPopover(false)}
      >
        <IonContent>
          <p>This is popover content</p>
        </IonContent>
      </IonPopover>
      <IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
    </IonContent>
  );
};

export default Tab1;

We add an IonButton to add the Show Popover button.

Then we add the IonPopover component to add the popover.

The isOpen prop controls whether it’s opened or not.

cssClass sets the class for the component.

onDidDismiss is called when we dismiss the popover.

The showPopover state controls the popover.

Loading Indicator

We can add a loading indicator with the IonLoading component.

For example, we can write:

import React, { useState } from 'react';
import { IonButton, IonContent, IonLoading } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [showLoading, setShowLoading] = useState(true);

  setTimeout(() => {
    setShowLoading(false);
  }, 2000);

  return (
    <IonContent>
      <IonButton onClick={() => setShowLoading(true)}>Show Loading</IonButton>
      <IonLoading
        cssClass='my-custom-class'
        isOpen={showLoading}
        onDidDismiss={() => setShowLoading(false)}
        message='Please wait...'
        duration={5000}
      />
    </IonContent>
  );
};

export default Tab1;

We add the IonButton to set the showLoading state.

Then we pass that into the isOpen prop of the IonLoading component to control when it loads.

The onDidDismiss prop’s function is run when we close the loading indicator.

duration has the duration to show the loading indicator.

Progress Bar

We can add a progress bar by using the IonProgressBar component.

For example, we can write:

import React from 'react';
import { IonContent, IonProgressBar } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
    </IonContent>
  );
};

export default Tab1;

to add a progress bar with the IonProgressBar component.

The color is set to primary to change the color blue.

value has the progress value.

Also, we can add the buffer prop to add a lighter line to the progress bar:

import React from 'react';
import { IonContent, IonProgressBar } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
    </IonContent>
  );
};

export default Tab1;

Skeleton Text

We can show skeleton text when we’re loading something in our app.

For instance, we can write:

import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonSkeletonText } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonSkeletonText animated style={{ width: '27px', height: '27px' }} slot="start" />
          <IonLabel>
            <h3>
              <IonSkeletonText animated style={{ width: '50%' }} />
            </h3>
            <p>
              <IonSkeletonText animated style={{ width: '80%' }} />
            </p>
            <p>
              <IonSkeletonText animated style={{ width: '60%' }} />
            </p>
          </IonLabel>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

We add the IonSkeletonText component to add a placeholder bar for the skeleton text.

animated makes it animated.

Conclusion

We can add various loading indicators and popovers with Ionic React.