update DemoReactMarvelApp,

03_source/mobile/src/pages/DemoReactMarvelApp/components/CharacterItem.tsx

@@ -0,0 +1,50 @@
+import { IonCol, IonIcon, IonImg, IonItem, IonLabel, IonSkeletonText } from "@ionic/react";
+import { chevronForwardOutline } from "ionicons/icons";
+import { Character } from "../../types";
+import styles from "./CharacterItem.module.scss";
+
+interface Props {
+    details: Character;
+    load?: boolean;
+    grid?: boolean;
+}
+
+const CharacterItem = (props: Props): React.JSX.Element => {
+
+    const { details, load = false, grid = true } = props;
+    const loadAmount = 20;
+
+    if (!load) {
+        return (
+
+            <IonCol size={ grid ? "6" : "12" }>
+                <IonItem detail={ false } routerLink={ `/character/${ details.id }` } lines="none" className={ styles.characterContainer }>
+                    <IonImg src={ grid ? `${ details.thumbnail.path }/standard_fantastic.${ details.thumbnail.extension }` : `${ details.thumbnail.path }.${ details.thumbnail.extension }` } />
+                    <div className={ styles.characterNameContainer }>
+                        <IonLabel>{ details.name }</IonLabel>
+                        <IonIcon icon={ chevronForwardOutline } />
+                    </div>
+                </IonItem>
+            </IonCol>
+        );
+    } else {
+
+        return (
+
+            <>
+                { Array.from({length: loadAmount }, (item, index) => {
+
+                    return (
+                        <IonCol key={ `loading_${ index }`} size="6">
+                            <IonItem lines="none" className={ styles.characterContainer }>
+                                <IonSkeletonText animated style={{ width: "100%", height: "180px" }} />
+                            </IonItem>
+                        </IonCol>
+                    );
+                })}
+            </>
+        );
+    }
+}
+
+export default CharacterItem;