feat(MembersWidget): Show SkeletonLoading while waiting for members

Signed-off-by: Jonas <[email protected]>
nextcloud · Aug 2, 2023 · 4ff1437 · 4ff1437
1 parent 6823950
commit 4ff1437
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/src/components/Page/LandingPageWidgets/MembersWidget.vue b/src/components/Page/LandingPageWidgets/MembersWidget.vue
@@ -1,7 +1,11 @@
 <template>
 	<div class="members-widget">
 		<WidgetHeading :title="t('collectives', 'Collective members')" />
-		<div ref="members" class="members-widget-members">
+		<SkeletonLoading v-if="loading"
+			type="avatar"
+			:count="3"
+			class="members-widget-skeleton" />
+		<div v-else ref="members" class="members-widget-members">
 			<NcAvatar v-for="member in trimmedMembers"
 				:key="member.singleId"
 				:user="member.userId"
@@ -28,6 +32,7 @@ import debounce from 'debounce'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { NcAvatar, NcButton } from '@nextcloud/vue'
 import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+import SkeletonLoading from '../../SkeletonLoading.vue'
 import { GET_CIRCLE_MEMBERS } from '../../../store/actions.js'
 import { circlesMemberTypes } from '../../../constants.js'
 import WidgetHeading from './WidgetHeading.vue'
@@ -39,6 +44,7 @@ export default {
 		DotsHorizontalIcon,
 		NcAvatar,
 		NcButton,
+		SkeletonLoading,
 		WidgetHeading,
 	},
 
@@ -67,6 +73,10 @@ export default {
 				.slice(0, this.showMembersCount)
 		},
 
+		loading() {
+			return this.trimmedMembers.length === 0
+		},
+
 		isNoUser() {
 			return function(member) {
 				return this.circleMemberType(member) !== circlesMemberTypes.TYPE_USER
@@ -142,6 +152,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.members-widget-skeleton {
+	height: 44px;
+	margin-top: 12px;
+}
+
 .members-widget-members {
 	display: flex;
 	flex-direction: row;

diff --git a/src/components/SkeletonLoading.vue b/src/components/SkeletonLoading.vue
@@ -11,7 +11,7 @@
 				</defs>
 			</svg>
 
-			<ul :key="'list' + suffix" :class="'placeholder-list placeholder-list' + suffix">
+			<ul :key="'list' + suffix" :class="'placeholder-list placeholder-list' + suffix + ' placeholder-list-' + type">
 				<li v-for="(width, index) in placeholderData" :key="'placeholder' + suffix + index">
 					<svg v-if="type === 'items' || type === 'members-list'"
 						:class="`${type}-placeholder`"
@@ -37,6 +37,12 @@
 						<rect class="text-placeholder-line-three" :style="textPlaceholderData[2]" />
 						<rect class="text-placeholder-line-four" :style="textPlaceholderData[3]" />
 					</svg>
+					<svg v-if="type === 'avatar'"
+						class="avatar-placeholder"
+						xmlns="http://www.w3.org/2000/svg"
+						:fill="'url(#placeholder-gradient' + suffix + ')'">
+						<circle class="avatar-placeholder-icon" />
+					</svg>
 				</li>
 			</ul>
 		</template>
@@ -123,6 +129,11 @@ $messages-list-max-width: 670px;
 	animation-timing-function: linear;
 }
 
+.placeholder-list-avatar {
+	display: flex;
+	gap: 12px;
+}
+
 .placeholder-gradient {
 	position: fixed;
 	height: 0;
@@ -178,6 +189,20 @@ $messages-list-max-width: 670px;
 	}
 }
 
+.avatar-placeholder {
+	$icon-size: 44px;
+	height: $icon-size;
+	width: $icon-size;
+
+	&-icon {
+		width: $icon-size;
+		height: $icon-size;
+		cx: calc(#{$icon-size} / 2);
+		cy: calc(#{$icon-size} / 2);
+		r: calc(#{$icon-size} / 2);
+	}
+}
+
 .page-heading-placeholder {
 	width: min($messages-list-max-width, 100vw);
 	height: calc(#{$clickable-area} * 2);