From 0470bbea070ac468f10f9bf9a6a1f32a94c267da Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Tue, 23 Feb 2021 16:11:24 -0500
Subject: [PATCH] Create timeline skeleton loader

---
 .../TimelineSkeleton/TimelineSkeleton.js      | 31 +++++++++++++++++++
 .../TimelineSkeleton/TimelineSkeleton.md      | 17 ++++++++++
 src/components/TimelineSkeleton/index.js      |  1 +
 3 files changed, 49 insertions(+)
 create mode 100644 src/components/TimelineSkeleton/TimelineSkeleton.js
 create mode 100644 src/components/TimelineSkeleton/TimelineSkeleton.md
 create mode 100644 src/components/TimelineSkeleton/index.js

diff --git a/src/components/TimelineSkeleton/TimelineSkeleton.js b/src/components/TimelineSkeleton/TimelineSkeleton.js
new file mode 100644
index 0000000..1dff555
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/src/components/TimelineSkeleton/TimelineSkeleton.md b/src/components/TimelineSkeleton/TimelineSkeleton.md
new file mode 100644
index 0000000..c13a7fe
--- /dev/null
+++ b/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 />
+```
\ No newline at end of file
diff --git a/src/components/TimelineSkeleton/index.js b/src/components/TimelineSkeleton/index.js
new file mode 100644
index 0000000..0d8e1b3
--- /dev/null
+++ b/src/components/TimelineSkeleton/index.js
@@ -0,0 +1 @@
+export { default } from "./TimelineSkeleton";
\ No newline at end of file