From c31ef97c9e64bfa84fdfcbf1a173a6171bc7101d Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Mon, 1 Apr 2019 14:28:04 +0200
Subject: [PATCH] UI Timeline: scale the placeholder to almost fit the screen.

So the timeline has some initial height (75% of viewport height), and
once the content shows up the page doesn't jump much.
---
 src/styles/components/_timeline.sass | 6 ++++++
 src/templates/mixins/components.pug  | 7 ++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/styles/components/_timeline.sass b/src/styles/components/_timeline.sass
index f455b93a..495fc783 100644
--- a/src/styles/components/_timeline.sass
+++ b/src/styles/components/_timeline.sass
@@ -1,4 +1,10 @@
 .timeline
+
+	// Shown briefly while the timeline is loading.
+	&.placeholder
+		color: $color-text-dark-hint
+		height: 75vh // Timelines are usually long, so scale the placeholder to almost viewport height.
+
 	.group
 		opacity: 0
 		animation: fade-in 500ms forwards
diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug
index d64ba27c..f226b3a5 100644
--- a/src/templates/mixins/components.pug
+++ b/src/templates/mixins/components.pug
@@ -80,9 +80,10 @@ mixin timeline(projectid, sortdirection)
 		data-project-id=projectid,
 		data-sort-dir=sortdirection,
 	)
-		// TODO: Make nicer reuseable placeholder
-		.h3.text-center.text-secondary.p-5.border-bottom
-			i.pi-spin.spin
+		.d-flex.w-100.h-100
+			//- TODO: Make nicer reuseable placeholder
+			.h3.text-muted.m-auto
+				i.pi-spin.spin
 
 
 //- Category listing (Learn, Libraries, etc).