From f4b7c1587c4197bc5c0247d4f3482c2e23345b12 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 11 Sep 2023 18:32:53 +0200
Subject: [PATCH] rewrite LoadingPlaceholder.vue component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/LoadingPlaceholder.vue         | 269 ++++++++----------
 .../Participant/LoadingParticipant.vue        |  69 -----
 .../ParticipantsList/ParticipantsList.vue     |   9 +-
 3 files changed, 121 insertions(+), 226 deletions(-)
 delete mode 100644 src/components/RightSidebar/Participants/ParticipantsList/Participant/LoadingParticipant.vue

diff --git a/src/components/LoadingPlaceholder.vue b/src/components/LoadingPlaceholder.vue
index cb0b4bbe01a..93bd6464044 100644
--- a/src/components/LoadingPlaceholder.vue
+++ b/src/components/LoadingPlaceholder.vue
@@ -2,8 +2,9 @@
   - @copyright Copyright (c) 2020 Joas Schilling <coding@schilljs.com>
   -
   - @author Joas Schilling <coding@schilljs.com>
+  - @author Maksim Sukharev <antreesy.web@gmail.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -18,54 +19,20 @@
   - You should have received a copy of the GNU Affero General Public License
   - along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
-<docs>
-
-Displays a loading placeholder for conversation messages.
-
-The gradient animation is achieved by having two placeholder elements,
-with opposite gradient directions (regular and reverse) displayed on top
-of each other (overlapped with position: absolute) and then fading between
-each other by animating the opacities.
-
-</docs>
 
 <template>
-	<div class="placeholder-main">
-		<!-- Placeholder animation -->
-		<template v-for="(suffix, gradientIndex) in ['-regular', '-reverse']">
-			<svg :key="'gradient' + suffix" :class="'placeholder-gradient placeholder-gradient' + suffix">
-				<defs>
-					<linearGradient :id="'placeholder-gradient' + suffix">
-						<stop offset="0%" :stop-color="(gradientIndex === 0) ? colorPlaceholderLight : colorPlaceholderDark" />
-						<stop offset="100%" :stop-color="(gradientIndex === 0) ? colorPlaceholderDark : colorPlaceholderLight" />
-					</linearGradient>
-				</defs>
-			</svg>
-
-			<ul :key="'list' + suffix" :class="'placeholder-list placeholder-list' + suffix">
-				<li v-for="(width, index) in placeholderData" :key="'placeholder' + suffix + index">
-					<svg v-if="type === 'conversations'"
-						class="conversation-placeholder"
-						xmlns="http://www.w3.org/2000/svg"
-						:fill="'url(#placeholder-gradient' + suffix + ')'">
-						<circle class="conversation-placeholder-icon" />
-						<rect class="conversation-placeholder-line-one" />
-						<rect class="conversation-placeholder-line-two" :style="width" />
-					</svg>
-					<svg v-if="type === 'messages'"
-						class="message-placeholder"
-						xmlns="http://www.w3.org/2000/svg"
-						:fill="'url(#placeholder-gradient' + suffix + ')'">
-						<circle class="message-placeholder-icon" />
-						<rect class="message-placeholder-line-one" />
-						<rect class="message-placeholder-line-two" />
-						<rect class="message-placeholder-line-three" />
-						<rect class="message-placeholder-line-four" :style="width" />
-					</svg>
-				</li>
-			</ul>
-		</template>
-	</div>
+	<ul :class="'placeholder-list placeholder-list--' + type"
+		:style="{ '--colorPlaceholderLight': colorPlaceholderLight, '--colorPlaceholderDark': colorPlaceholderDark }">
+		<li v-for="(item, index) in placeholderData" :key="index" class="placeholder-item">
+			<div class="placeholder-item__avatar">
+				<div class="placeholder-item__avatar-circle" />
+			</div>
+			<div class="placeholder-item__content" :style="{'--last-line-width': item.width}">
+				<div v-for="idx in item.amount" :key="idx" class="placeholder-item__content-line" />
+			</div>
+			<div v-if="type === 'messages'" class="placeholder-item__info" />
+		</li>
+	</ul>
 </template>
 
 <script>
@@ -80,6 +47,9 @@ export default {
 		type: {
 			type: String,
 			required: true,
+			validator(value) {
+				return ['conversations', 'messages', 'participants'].includes(value)
+			},
 		},
 		count: {
 			type: Number,
@@ -98,8 +68,11 @@ export default {
 		placeholderData() {
 			const data = []
 			for (let i = 0; i < this.count; i++) {
-				// generate random widths
-				data.push('width: ' + (Math.floor(Math.random() * 20) + 30) + '%')
+				// set up amount of lines in skeleton and generate random widths for last line
+				data.push({
+					amount: this.type === 'messages' ? 4 : this.type === 'conversations' ? 2 : 1,
+					width: this.type === 'participants' ? '60%' : (Math.floor(Math.random() * 40) + 30) + '%',
+				})
 			}
 			return data
 		},
@@ -108,132 +81,126 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	@import '../assets/variables';
-
-	$clickable-area: 44px;
-	$margin: 8px;
-
-	.placeholder-main {
-		max-width: $messages-list-max-width;
-		position: relative;
-		margin: auto;
-		padding: 0;
-	}
-
-	.placeholder-list {
-		position: absolute;
-		translate: translateZ(0);
-	}
+.placeholder-list {
+	width: 100%;
+	transform: translateZ(0); // enable hardware acceleration
+}
 
-	.placeholder-list-regular {
-		animation: pulse 2s;
-		animation-iteration-count: infinite;
-		animation-timing-function: linear;
-	}
+.placeholder-item {
+	display: flex;
+	gap: 8px;
+	width: 100%;
 
-	.placeholder-list-reverse {
-		animation: pulse-reverse 2s;
-		animation-iteration-count: infinite;
-		animation-timing-function: linear;
+	&__avatar {
+		flex-shrink: 0;
+		&-circle {
+			height: var(--default-clickable-area);
+			width: var(--default-clickable-area);
+			border-radius: var(--default-clickable-area);
+		}
 	}
 
-	.placeholder-gradient {
-		position: fixed;
-		height: 0;
-		width: 0;
-		z-index: -1;
-	}
+	&__content {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
 
-	.conversation-placeholder,
-	.message-placeholder {
+		&-line {
+			margin: 5px 0 4px;
+			width: 100%;
+			height: 15px;
 
-		&-icon {
-			width: $clickable-area;
-			height: $clickable-area;
-			cx: calc(#{$clickable-area} / 2);
-			cy: calc(#{$clickable-area} / 2);
-			r: calc(#{$clickable-area} / 2);
+			&:last-child {
+				width: var(--last-line-width);
+			}
 		}
 	}
+}
 
-	.conversation-placeholder {
-		width: calc(100% - 2 * #{$margin});
-		height: $clickable-area;
-		margin: $margin;
-
-		&-line-one,
-		&-line-two {
-			width: calc(100% - #{$margin + $clickable-area});
-			position: relative;
-			height: 1em;
-			x: $margin + $clickable-area;
-		}
-
-		&-line-one {
-			y: 5px;
-		}
+// Conversations placeholder ruleset
+.placeholder-list--conversations {
+	.placeholder-item {
+		margin: 2px 0;
+		padding: 8px 10px;
 
-		&-line-two {
-			y: 25px;
+		&__content {
+			width: 70%;
 		}
 	}
+}
 
-	.message-placeholder {
-		width: $messages-list-max-width;
-		height: calc(#{$clickable-area} * 2);
-		margin: $margin auto;
-		padding: 0 $margin;
-		display: block;
-
-		&-line-one,
-		&-line-two,
-		&-line-three,
-		&-line-four {
-			width: 640px;
-			height: 1em;
-			x: $margin + $clickable-area;
+// Messages placeholder ruleset
+.placeholder-list--messages {
+	max-width: 800px;
+	margin: auto;
+
+	.placeholder-item {
+		padding-right: 8px;
+		&__avatar {
+			width: 52px;
+			padding: 18px 10px 0;
+
+			&-circle {
+				height: 32px;
+				width: 32px;
+				border-radius: 32px;
+			}
 		}
 
-		&-line-one {
-			y: 5px;
-			width: 175px;
-		}
+		&__content {
+			max-width: 600px;
+			padding: 12px 0;
 
-		&-line-two {
-			y: 25px;
-		}
+			&-line {
+				margin: 4px 0 3px;
 
-		&-line-three {
-			y: 45px;
+				&:first-child {
+					margin-bottom: 9px;
+					width: 20%;
+				}
+			}
 		}
 
-		&-line-four {
-			y: 65px;
+		&__info {
+			width: 100px;
+			height: 15px;
+			margin: var(--default-clickable-area) var(--default-clickable-area) 0 8px;
+			animation-delay: 0.8s;
 		}
 	}
+}
 
-	@keyframes pulse {
-		0% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
+// Participants placeholder ruleset
+.placeholder-list--participants {
+	.placeholder-item {
+		gap: 12px;
+		margin: 4px 0;
+		padding: 0 4px;
+		height: 56px;
+		align-items: center;
 
-	@keyframes pulse-reverse {
-		0% {
-			opacity: 0;
-		}
-		50% {
-			opacity: 1;
-		}
-		100% {
-			opacity: 0;
+		&__avatar {
+			margin: auto;
 		}
 	}
+}
+
+// Animation
+.placeholder-item__avatar-circle,
+.placeholder-item__content-line,
+.placeholder-item__info {
+	background-size: 200vw;
+	background-image: linear-gradient(90deg, var(--colorPlaceholderDark) 65%, var(--colorPlaceholderLight) 70%, var(--colorPlaceholderDark) 75%);
+	animation: loading-animation 3s forwards infinite linear;
+	will-change: background-position;
+}
 
+@keyframes loading-animation {
+	0% {
+		background-position: 0;
+	}
+	100% {
+		background-position: 140vw;
+	}
+}
 </style>
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/LoadingParticipant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/LoadingParticipant.vue
deleted file mode 100644
index 00bba8cc969..00000000000
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/LoadingParticipant.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2020 Joas Schilling <coding@schilljs.com>
-  -
-  - @author Joas Schilling <coding@schilljs.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-	<li class="participant-loading">
-		<div class="icon-container" />
-		<div class="placeholder">
-			<div class="username" />
-		</div>
-	</li>
-</template>
-
-<script>
-export default {
-	name: 'LoadingParticipant',
-}
-</script>
-
-<style lang="scss" scoped>
-@use 'sass:math';
-
-.participant-loading {
-	$icon-size: 44px;
-	height: 56px;
-	list-style-type: none;
-	padding-left: 4px;
-	margin: 5px 0;
-
-	.icon-container {
-		width: $icon-size;
-		height: $icon-size;
-		margin-top: 2px;
-		display: inline-block;
-		background-color: var(--color-background-dark);
-		border-radius: 50%;
-	}
-
-	.placeholder {
-		width: 175px;
-		height: $icon-size;
-		display: inline-block;
-
-		.username {
-			background-color: var(--color-background-dark);
-			height: math.div($icon-size, 2);
-			margin-top: math.div($icon-size, 4);
-			margin-left: 2px;
-		}
-	}
-}
-</style>
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue b/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue
index 8c0dc5e7902..d6aa6c43d9b 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue
@@ -29,24 +29,21 @@
 				:show-user-status="showUserStatus"
 				@click-participant="handleClickParticipant" />
 		</ul>
-		<template v-if="loading">
-			<LoadingParticipant v-for="n in dummyParticipants"
-				:key="n" />
-		</template>
+		<LoadingPlaceholder v-if="loading" type="participants" :count="dummyParticipants" />
 	</div>
 </template>
 
 <script>
 
-import LoadingParticipant from './Participant/LoadingParticipant.vue'
+import LoadingPlaceholder from '../../../LoadingPlaceholder.vue'
 import Participant from './Participant/Participant.vue'
 
 export default {
 	name: 'ParticipantsList',
 
 	components: {
+		LoadingPlaceholder,
 		Participant,
-		LoadingParticipant,
 	},
 
 	props: {