Placeholder loading anim. Multiline text support.

src/PersonalData.ts

@@ -37,7 +37,11 @@ export const personalData: PersonalData = {
                 position: 'Software Engineer',
                 company: 'Q2 Interactive',
                 timerange: '2009 - 2013',
-                description: '',
+                description: `Development and project lead of multiple web applications:
+                - CRM system (PHP backend with Android frontend),
+                - Accounting web app,
+                - e-commerce sites.`,
+                tags: ['PHP', 'Java', 'Server hosting', 'Linux', 'Android']
             }
         ]
     },

src/app/components/job/JobCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Card from 'react-bootstrap/Card';
-import { useAutoFocus, useFocusedElement } from '../../hooks/FocusedElement';
+import { useAutoFocus } from '../../hooks/FocusedElement';
+import { Placeholder } from 'react-bootstrap';
 
 export type Props = {
     heading?: string,
@@ -10,6 +11,20 @@ export type Props = {
     description: string
 };
 
+export function JobCardPlaceholder() {
+    return <Card className='job-card'>
+        <Card.Body>
+        <Placeholder as={Card.Title} animation="glow">
+            <Placeholder xs={6} />
+        </Placeholder>
+        <Placeholder as={Card.Text} animation="glow">
+            <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={5} />{' '}
+            <Placeholder xs={4} /> <Placeholder xs={3} />
+        </Placeholder>
+        </Card.Body>
+    </Card>
+}
+
 export default function JobCard(props: Props) {
     const focusRef = useAutoFocus<HTMLDivElement>([props.position, props.company, props.timerange].join(' - '))
     return (
@@ -22,7 +37,7 @@ export default function JobCard(props: Props) {
                 <Card.Subtitle>
                     <span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span>
                     </Card.Subtitle>
-                <Card.Text>{props.description}</Card.Text>
+                <Card.Text className='multiline'>{props.description}</Card.Text>
             </Card.Body>
         </Card>
     );

src/app/components/job/JobsAccordion.tsx

@@ -40,7 +40,7 @@ export default function JobsAccordion(props: JobListProps) {
       {jobs.previous?.map((job, index) => (
       <Accordion.Item eventKey={`previous-${index}`} key={index}>
         <Accordion.Header><JobTitle job={job} /></Accordion.Header>
-        <Accordion.Body>
+        <Accordion.Body className='multiline'>
         {job.description}
         </Accordion.Body>
       </Accordion.Item>

src/app/components/job/JobsCards.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
-import JobCard from './JobCard';
+import JobCard, { JobCardPlaceholder } from './JobCard';
 import { partition } from '../../utils';
 import { JobListProps } from './types';
 
@@ -16,6 +16,13 @@ const defaultProps = {
   currentHeading: 'Currently',
 }
 
+export function JobsCardsPlaceholder() {
+  return <Container>
+    <Row><Col><JobCardPlaceholder /></Col></Row>
+    <Row><Col><JobCardPlaceholder /></Col></Row>
+  </Container>
+}
+
 export default function JobsCards(props: JobListProps) {
   const {jobs} = props
   const config = {...defaultProps, ...props}

src/app/components/job/JobsHistory.tsx

@@ -4,7 +4,7 @@ import Container from 'react-bootstrap/Container';
 import useSize from '../../hooks/Size';
 import { JobListProps } from './types';
 import JobsAccordion from './JobsAccordion';
-import JobsCards from './JobsCards';
+import JobsCards, { JobsCardsPlaceholder } from './JobsCards';
 
 export type Props = {
   heading: string,
@@ -18,7 +18,8 @@ const defaultProps = {
 export default function JobHistory(props: Props) {
   const {SizeWrapper, size} = useSize()
 
-  const jobsList = size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />
+  const jobsList = size.width === 0 ? <JobsCardsPlaceholder /> : (
+    size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
 
   return (
     <Container>

src/app/globals.css

@@ -61,3 +61,9 @@ body {
 .accordion-button.collapsed {
     background-color: lavender;
 }
+.accordion {
+    margin: 1rem;
+}
+.multiline {
+    white-space: pre-line;
+}