Create timeline skeleton loader

src/components/TimelineSkeleton/TimelineSkeleton.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { Paper, Typography, makeStyles, useTheme } from '@material-ui/core';
+import { Skeleton } from '@material-ui/lab';
+
+export default function TimelineSkeleton(){
+
+    const theme = useTheme();
+    const useStyles = makeStyles({
+        "Paper-root": {
+            overflow: "hidden"
+        },
+        "padding": {
+            padding: theme.spacing(1)
+        }
+
+    });
+    const classes = useStyles();
+
+    return(
+        <Paper classes={{root: classes["Paper-root"]}}>
+            <div className={classes.padding}>
+                <Typography variant="body1">
+                    <Skeleton />
+                </Typography>
+            </div>
+            <div className={classes.padding}>
+                {[...Array(2).keys()].map( _ => <Skeleton /> )}
+            </div>
+        </Paper>
+    );
+}

src/components/TimelineSkeleton/TimelineSkeleton.md

@@ -0,0 +1,17 @@
+Renders a skeleton UI to indicate loading of a timeline item. 
+
+```jsx
+import { ThemeProvider } from "@material-ui/core/styles";
+import webqueue2Theme from "../../theme";
+import TimelineActionCard from "./TimelineSkeleton";
+
+const theme = webqueue2Theme(false);
+
+<ThemeProvider theme={theme}>
+    <TimelineSkeleton />
+</ThemeProvider>
+```
+
+```jsx static
+<TimelineSkeleton />
+```

src/components/TimelineSkeleton/index.js

@@ -0,0 +1 @@
+export { default } from "./TimelineSkeleton";