added loading animation. add episode info to character cards

client/src/components/characterCard.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import Card from 'react-bootstrap/Card';
+import Table from 'react-bootstrap/Table';
 
 export default function CharacterCard(props) {
     
-    const characterName = props.character.fullName;
     const image = new URL(props.character.image).pathname;
+    const characterName = props.character.fullName;
+    const firstEpisode = props.character.firstEpisode;
+    const lastEpisode = props.character.lastEpisode;
     
     return(
 
@@ -13,8 +16,18 @@ export default function CharacterCard(props) {
             <Card.Body>
                 <Card.Title>{characterName}</Card.Title>
                 <Card.Text>
-                    Some quick example text to build on the card title and make up the
-                    bulk of the card's content.
+                    <Table>
+                        <tbody>
+                            <tr>
+                                <td className='fw-bold'>First Episode:</td>
+                                <td>{firstEpisode}</td>
+                            </tr>
+                            <tr>
+                                <td className='fw-bold'>Last Episode:</td>
+                                <td>{lastEpisode}</td>
+                            </tr>
+                        </tbody>
+                    </Table>
                 </Card.Text>
             </Card.Body>
         </Card>

client/src/components/loading.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import { TailSpin } from 'react-loading-icons';
+
+export default function Loading() {
+
+    return (
+        <Container className='m-auto'>
+            <Row>
+                <Col className='text-center'>
+                    <TailSpin
+                        height='3em'
+                        fill='#912718'
+                        stroke='#912718'
+                        speed={1}
+                        fillOpacity={1}
+                        strokeOpacity={1}
+                        strokeWidth={2}
+                    />
+                     <div className='mt-2'>Loading...</div>
+                </Col>
+            </Row>
+        </Container>
+    );
+
+}