adding loading state

Author: prateekbh

src/routes/blog/index.js

@@ -6,25 +6,41 @@ import style from './style';
 
 const blogs = (props) => {
 	const [data, isLoading] = usePrerenderData(props);
+	return (
+		<article class={style.blogcontainer}>
+			{getBlogBody(data, isLoading)}
+		</article>
+	);
+};
+
+function getBlogBody(data, isLoading) {
 	if (isLoading) {
-		return (<h1>Loading</h1>);
+		return (
+			<div class={style.loadingPlaceholder}>
+				<h1 class={`${style.blogtitle} loading`} >&nbsp;</h1>
+				<caption class={`${style.blogsubtitle} loading`}>&nbsp;</caption>
+				<div class={style.blogbody}>
+					<div class={`${style.loadingBody} loading`} />
+					<div class={`${style.loadingBody} loading`} />
+					<div class={`${style.loadingBody} loading`} />
+				</div>
+			</div>
+		);
 	}
 
 	if (data && data.data) {
 		const { details, content } = data.data;
 		return (
-			<article class={style.blogcontainer}>
+			<div>
 				<h1 class={style.blogtitle}>{details.title}</h1>
 				{ details.subtitle && <caption class={style.blogsubtitle}>{details.subtitle}</caption> }
 				{ details.cover && <img class={style.blogcover} src={details.cover} /> }
 				<div class={style.blogbody}>
 					<Markdown>{ content }</Markdown>
 				</div>
-			</article>
+			</div>
 		);
 	}
-
-	return (<h1>Blog</h1>);
-};
+}
 
 export default blogs;

src/routes/blog/style.css

@@ -8,7 +8,7 @@
 .blogtitle {
   font-size: 2.2rem;
   font-weight: 400;
-  margin-bottom: 0;
+  margin-bottom: 8px;
 }
 
 .blogbody {
@@ -35,3 +35,24 @@
 .blogcover {
   width: 100%;
 }
+
+.loadingPlaceholder .blogtitle {
+  height: 24px;
+}
+
+.loadingPlaceholder .blogsubtitle {
+  height: 18px;
+}
+
+.loadingBody {
+  height: 12px;
+  margin-bottom: 8px;
+}
+
+.loadingBody:nth-child(1) {
+  width: 90%;
+}
+
+.loadingBody:nth-child(3) {
+  width: 65%;
+}

src/style/index.css

@@ -26,3 +26,25 @@ a {
 	text-decoration: none;
 	color: #333;
 }
+
+.loading {
+	animation-duration: 1s;
+	animation-fill-mode: forwards;
+	animation-iteration-count: infinite;
+	animation-name: placeHolderShimmer;
+	animation-timing-function: linear;
+	background: #f6f7f9;
+	background-image: linear-gradient(to right, #f6f7f9 0%, #e9ebee 20%, #f6f7f9 40%, #f6f7f9 100%);
+	background-repeat: no-repeat;
+	background-size: 800px 104px;
+	position: relative;
+}
+
+@keyframes placeHolderShimmer{
+  0% {
+      background-position: -468px 0;
+  }
+  100% {
+      background-position: 468px 0;
+  }
+}