Implement code for testing skeleton view UI in ItemBodyView

src/components/ItemBodyView/ItemBodyView.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab';
+import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot, Skeleton } from '@material-ui/lab';
 import { makeStyles } from "@material-ui/core";
 import DirectoryInformation from "../DirectoryInformation/";
 import Assignment from "../Assignment/";
@@ -41,21 +41,26 @@ export default function ItemBodyView({ item }) {
 			case "status":
 				return <TimelineActionCard {...section} />
 			case "assignment":
-					return <Assignment {...section} />
+				return <Assignment {...section} />
 			case "reply_to_user":
 				return <TimelineActionCard {...section} />
 			case "reply_from_user":
-				return  <MessageView {...section} />
+				return <MessageView {...section} />
 			case "parse_error":
 				return <ParseError {...section} />
 			default:
 				return `No match found for type: ${section.type}`;
 		};
 	};
 
+	const testing = true;
+
 	return (
 		<Timeline align="left" classes={{ root: classes["Timeline-root"] }}>
-			{objectIsEmpty(item) ? "" : item.content.map((section) => (
+			{/* Below is the original ternary operation for the map fucntion for future reference */}
+			{/* {objectIsEmpty(item) ? "" : item.content.map((section) */}
+
+			{testing ? Object.keys(item).map((section) => (
 				<TimelineItem
 					classes={{
 						missingOppositeContent: classes["TimelineItem-missingOppositeContent"],
@@ -68,10 +73,29 @@ export default function ItemBodyView({ item }) {
 					<TimelineContent
 						classes={{ root: classes["TimelineContent-root"] }}
 					>
-						{generateTimelineItem(section)}
+						<Skeleton />
 					</TimelineContent>
 				</TimelineItem>
-			))}
+			))
+				: item.content.map((section) => (
+					<TimelineItem
+						classes={{
+							missingOppositeContent: classes["TimelineItem-missingOppositeContent"],
+						}}
+					>
+						<TimelineSeparator>
+							<TimelineDot />
+							<TimelineConnector />
+						</TimelineSeparator>
+						<TimelineContent
+							classes={{ root: classes["TimelineContent-root"] }}
+						>{item === undefined
+							? <Skeleton />
+							: generateTimelineItem(section)
+							}
+						</TimelineContent>
+					</TimelineItem>
+				))}
 		</Timeline>
 	);
 };