From 136bdcabb912eeb04ab6469abafed7b077776031 Mon Sep 17 00:00:00 2001 From: hassnian Date: Sat, 5 Oct 2024 11:46:00 +0500 Subject: [PATCH 1/2] fix(SkeletonLoader.vue): loading with dots "dancing" --- components/shared/SkeletonLoader.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/shared/SkeletonLoader.vue b/components/shared/SkeletonLoader.vue index 38ba596ecf..898417d56c 100644 --- a/components/shared/SkeletonLoader.vue +++ b/components/shared/SkeletonLoader.vue @@ -82,15 +82,16 @@ const calculateTextContainerWidth = () => { return } + textContainerWidth.value = undefined + nextTick(() => { const title = titleRef.value?.clientWidth || 0 const substitle = subtitleRef.value?.clientWidth || 0 const subtitlePlusDots = substitle + DOTS_PLUS_MARGIN_WIDTH - textContainerWidth.value - = substitle && subtitlePlusDots > title - ? `${subtitlePlusDots}px` - : undefined + if (substitle && subtitlePlusDots > title) { + textContainerWidth.value = `${subtitlePlusDots}px` + } }) } From 0dfd77ec01a35ab082b5f8b803c80446421bc7eb Mon Sep 17 00:00:00 2001 From: hassnian <44554284+hassnian@users.noreply.github.com> Date: Mon, 7 Oct 2024 15:27:13 +0500 Subject: [PATCH 2/2] ref(SkeletonLoader.vue): typo --- components/shared/SkeletonLoader.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/shared/SkeletonLoader.vue b/components/shared/SkeletonLoader.vue index 898417d56c..6c6b5eb85c 100644 --- a/components/shared/SkeletonLoader.vue +++ b/components/shared/SkeletonLoader.vue @@ -86,10 +86,10 @@ const calculateTextContainerWidth = () => { nextTick(() => { const title = titleRef.value?.clientWidth || 0 - const substitle = subtitleRef.value?.clientWidth || 0 - const subtitlePlusDots = substitle + DOTS_PLUS_MARGIN_WIDTH + const subtitle = subtitleRef.value?.clientWidth || 0 + const subtitlePlusDots = subtitle + DOTS_PLUS_MARGIN_WIDTH - if (substitle && subtitlePlusDots > title) { + if (subtitle && subtitlePlusDots > title) { textContainerWidth.value = `${subtitlePlusDots}px` } })