From 35225a189da512c3b8e7d6d7c0f5d7c4fe2b4197 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Fri, 7 Sep 2018 14:55:04 +0200
Subject: [PATCH] Replace #project-loading spinning icon with a .loader-bar

---
 src/styles/_apps_base.sass             | 50 ++++++++++++++++++++++++++
 src/styles/_project.sass               | 17 ---------
 src/templates/nodes/search.pug         |  2 --
 src/templates/projects/edit_layout.pug |  2 --
 4 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/styles/_apps_base.sass b/src/styles/_apps_base.sass
index 41eab8aa..f4a05162 100644
--- a/src/styles/_apps_base.sass
+++ b/src/styles/_apps_base.sass
@@ -399,3 +399,53 @@ nav.sidebar
 			top: -1px
 			left: -19px
 			z-index: 1
+
+$loader-bar-width: 100px
+$loader-bar-height: 2px
+.loader-bar
+	background-color: $color-background
+	bottom: 0
+	content: ''
+	display: none
+	height: 0
+	overflow: hidden
+	position: absolute
+	visibility: hidden
+	width: 100%
+
+	&:before
+		animation: none
+		background-color: $primary
+		content: ''
+		display: block
+		height: $loader-bar-height
+		left: -$loader-bar-width
+		position: absolute
+		width: $loader-bar-width
+
+	&.active
+		display: block
+		visibility: visible
+
+		&:before
+			animation: loader-bar-slide 2.5s linear infinite
+
+@keyframes loader-bar-slide
+	from
+		left: -$loader-bar-width
+		width: 0%
+
+	50%
+		width: 30%
+
+	70%
+		width: 70%
+
+	80%
+		left: 50%
+
+	95%
+		left: 120%
+
+	to
+		left: 100%
diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index 5b688ca6..0344ece6 100644
--- a/src/styles/_project.sass
+++ b/src/styles/_project.sass
@@ -250,23 +250,6 @@ ul.project-edit-tools
 	/* // Extra asset tools in dropdown */
 /* // Edit Asset buttons */
 
-#project-loading
-	color: $color-text-light-primary
-	margin-left: auto
-	display: inline-block
-	background-color: transparent
-	opacity: 0
-	transition: opacity 150ms ease-in-out
-	+position-center-translate
-
-	i
-		position: relative
-		top: 2px
-
-	&.active
-		background-color: rgba($color-background-nav-dark, .7)
-		opacity: 1
-
 
 ul.project_nav-edit-list
 	list-style: none
diff --git a/src/templates/nodes/search.pug b/src/templates/nodes/search.pug
index 90978ef8..bb177f09 100644
--- a/src/templates/nodes/search.pug
+++ b/src/templates/nodes/search.pug
@@ -39,8 +39,6 @@ script.
 				data-placement="left",
 				class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}")
 				a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-					#project-loading
-						i.pi-spin
 					| {% if project.picture_square %}
 					img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
 					| {% else %}
diff --git a/src/templates/projects/edit_layout.pug b/src/templates/projects/edit_layout.pug
index 388c3a15..699150d4 100644
--- a/src/templates/projects/edit_layout.pug
+++ b/src/templates/projects/edit_layout.pug
@@ -12,8 +12,6 @@
 					data-placement="left",
 					class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}")
 					a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-						#project-loading
-							i.pi-spin
 						| {% if project.picture_square %}
 						img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
 						| {% else %}