From a66f6e604fea64434eb3e5f3f33ad91a978906c8 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Sat, 25 May 2024 03:40:39 -0400
Subject: [PATCH] feat: use skeleton screen as transclude load animation

---
 .../ext.tabberNeue.init.less                  | 16 +++++
 modules/ext.tabberNeue/ext.tabberNeue.less    | 67 +++++++++----------
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/modules/ext.tabberNeue.init/ext.tabberNeue.init.less b/modules/ext.tabberNeue.init/ext.tabberNeue.init.less
index 06666bd..dc0f8ba 100644
--- a/modules/ext.tabberNeue.init/ext.tabberNeue.init.less
+++ b/modules/ext.tabberNeue.init/ext.tabberNeue.init.less
@@ -24,7 +24,13 @@
 				border-radius: 40px;
 				margin-top: 1em;
 				margin-left: 0.75em;
+				animation-duration: 10s;
+				animation-fill-mode: forwards;
+				animation-iteration-count: infinite;
+				animation-name: skeletonload;
+				animation-timing-function: linear;
 				background: #000;
+				background: linear-gradient( to right, #202122 8%, #54595d 18%, #202122 33% );
 				/* Use double quote in PHP */
 				content: '';
 			}
@@ -46,3 +52,13 @@
 		display: none;
 	}
 }
+
+@keyframes skeletonload {
+	0% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: 100em 0;
+	}
+}
diff --git a/modules/ext.tabberNeue/ext.tabberNeue.less b/modules/ext.tabberNeue/ext.tabberNeue.less
index 816ec85..8df42ec 100644
--- a/modules/ext.tabberNeue/ext.tabberNeue.less
+++ b/modules/ext.tabberNeue/ext.tabberNeue.less
@@ -152,36 +152,36 @@
 		}
 
 		&--loading {
-			/*
-			* Animation based on dots indicators from Wikimedia
-			* T266028
-			*/
 			.tabber__transclusion {
-				margin: 0.5em 0; // based on Vector
-				text-align: center;
-				white-space: nowrap;
+				opacity: 0.1;
+
+				a {
+					color: transparent;
+				}
+
+				a,
+				&::before,
+				&::after {
+					display: block;
+					height: 0.5em;
+					border-radius: 40px;
+					margin-top: 1em;
+					animation-duration: 3s;
+					animation-fill-mode: forwards;
+					animation-iteration-count: infinite;
+					animation-name: skeletonload;
+					animation-timing-function: linear;
+					background: #000;
+					background: linear-gradient( to right, #202122 8%, #54595d 18%, #202122 33% );
+				}
 
-				.tabber__loading-indicator,
 				&::before,
 				&::after {
-					display: inline-block;
-					width: @width-bounce-dot;
-					height: @width-bounce-dot;
-					border-radius: 100%;
-					animation: bounce-delay 1600ms infinite ease-in-out both;
-					animation-delay: -160ms;
-					background-color: #36c;
 					content: '';
 				}
 
-				&::before {
-					margin-right: @width-bounce-dot / 4;
-					animation-delay: -330ms;
-				}
-
 				&::after {
-					margin-left: @width-bounce-dot / 4;
-					animation-delay: 0ms;
+					width: 60%;
 				}
 			}
 		}
@@ -197,19 +197,6 @@
 	}
 }
 
-@keyframes bounce-delay {
-	0%,
-	50%,
-	100% {
-		transform: scale( 0.625 );
-	}
-
-	20% {
-		opacity: 0.87;
-		transform: scale( 1 );
-	}
-}
-
 @media ( hover: none ) {
 	// Need extra specificity to override
 	.tabber {
@@ -273,3 +260,13 @@
 		}
 	}
 }
+
+@keyframes skeletonload {
+	0% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: 100em 0;
+	}
+}