ionic react skeleton text

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading, IonProgressBar, IonSkeletonText,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  closeCircle, home, star, navigate,
  informationCircle, checkmarkCircle, shuffle,
  call
} from 'ionicons/icons';

type dataType = {
  heading: string
  para1: string
  para2: string
}

const Tab2: React.FC = () => {
  const [data, setData] = useState<dataType>();

  setTimeout(() => {
    setData({
      heading: 'Normal text',
      para1: 'Lorem ipsum dolor sit amet, consectetur',
      para2: 'adipiscing elit.'
    });
  }, 5000);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>SkeletonText Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {data ? (
          <>
            <div className="ion-padding">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar
              arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt
              vehicula.
          </div>

            <IonList>
              <IonListHeader>
                <IonLabel>
                  Data
              </IonLabel>
              </IonListHeader>
              <IonItem>
                <IonAvatar slot="start">
                  <img src="./avatar.svg" />
                </IonAvatar>
                <IonLabel>
                  <h3>{data.heading}</h3>
                  <p>{data.para1}</p>
                  <p>{data.para2}</p>
                </IonLabel>
              </IonItem>
              <IonItem>
                <IonThumbnail slot="start">
                  <img src="./thumbnail.svg" />
                </IonThumbnail>
                <IonLabel>
                  <h3>{data.heading}</h3>
                  <p>{data.para1}</p>
                  <p>{data.para2}</p>
                </IonLabel>
              </IonItem>
              <IonItem>
                <IonIcon icon={call} slot="start" />
                <IonLabel>
                  <h3>{data.heading}</h3>
                  <p>{data.para1}</p>
                  <p>{data.para2}</p>
                </IonLabel>
              </IonItem>
            </IonList>
          </>
        ) : (
            <>
              <div className="ion-padding custom-skeleton">
                <IonSkeletonText animated style={{ width: '60%' }} />
                <IonSkeletonText animated />
                <IonSkeletonText animated style={{ width: '88%' }} />
                <IonSkeletonText animated style={{ width: '70%' }} />
                <IonSkeletonText animated style={{ width: '60%' }} />
              </div>

              <IonList>
                <IonListHeader>
                  <IonLabel>
                    <IonSkeletonText animated style={{ width: '20%' }} />
                  </IonLabel>
                </IonListHeader>
                <IonItem>
                  <IonAvatar slot="start">
                    <IonSkeletonText animated />
                  </IonAvatar>
                  <IonLabel>
                    <h3>
                      <IonSkeletonText animated style={{ width: '50%' }} />
                    </h3>
                    <p>
                      <IonSkeletonText animated style={{ width: '80%' }} />
                    </p>
                    <p>
                      <IonSkeletonText animated style={{ width: '60%' }} />
                    </p>
                  </IonLabel>
                </IonItem>
                <IonItem>
                  <IonThumbnail slot="start">
                    <IonSkeletonText animated />
                  </IonThumbnail>
                  <IonLabel>
                    <h3>
                      <IonSkeletonText animated style={{ width: '50%' }} />
                    </h3>
                    <p>
                      <IonSkeletonText animated style={{ width: '80%' }} />
                    </p>
                    <p>
                      <IonSkeletonText animated style={{ width: '60%' }} />
                    </p>
                  </IonLabel>
                </IonItem>
                <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>
    </IonPage >
  )
}

export default Tab2;