From faec2d907a1aff53f3c5daa317d90307c4a05f7d Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 20 Sep 2024 18:12:47 +0300
Subject: [PATCH] Update skeletons

---
 frontend/src/components/VSkeleton/VBone.vue   | 24 ++++++------
 .../components/VSkeleton/VGridSkeleton.vue    |  8 ++--
 .../VSkeleton/meta/VGridSkeleton.stories.ts   | 37 +++----------------
 frontend/src/styles/tailwind.css              |  6 +++
 4 files changed, 30 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/VSkeleton/VBone.vue b/frontend/src/components/VSkeleton/VBone.vue
index 7ce0ed5308..4cd7356be9 100644
--- a/frontend/src/components/VSkeleton/VBone.vue
+++ b/frontend/src/components/VSkeleton/VBone.vue
@@ -1,12 +1,21 @@
-<script setup lang="ts">
-withDefaults(defineProps<{ shimmer?: boolean }>(), { shimmer: true })
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <div :class="['bg-secondary', { shimmering: shimmer }]" />
+  <div class="bg-gradient shimmering motion-reduce:!animate-none" />
 </template>
 
 <style scoped>
+.bg-gradient {
+  @apply bg-secondary;
+  background: linear-gradient(
+    to right,
+    var(--color-skeleton-base) 4%,
+    var(--color-skeleton-secondary) 25%,
+    var(--color-skeleton-base) 36%
+  );
+  background-size: 1000px 100%;
+}
+
 @keyframes shimmer {
   0% {
     background-position: -1000px 0;
@@ -18,12 +27,5 @@ withDefaults(defineProps<{ shimmer?: boolean }>(), { shimmer: true })
 
 .shimmering {
   animation: shimmer 3s infinite linear;
-  background: linear-gradient(
-    to right,
-    theme("backgroundColor.secondary") 4%,
-    theme("borderColor.default") 25%,
-    theme("backgroundColor.secondary") 36%
-  );
-  background-size: 1000px 100%;
 }
 </style>
diff --git a/frontend/src/components/VSkeleton/VGridSkeleton.vue b/frontend/src/components/VSkeleton/VGridSkeleton.vue
index e0a15e57bf..fd9803cc87 100644
--- a/frontend/src/components/VSkeleton/VGridSkeleton.vue
+++ b/frontend/src/components/VSkeleton/VGridSkeleton.vue
@@ -3,10 +3,12 @@
  * Display placeholder elements while waiting for the actual elements to be
  * loaded in the results views.
  */
-import { computed } from "vue"
+import { computed, inject, ref } from "vue"
 
 import type { SupportedSearchType } from "~/constants/media"
 
+import { IsSidebarVisibleKey } from "~/types/provides"
+
 import VAudioTrackSkeleton from "~/components/VSkeleton/VAudioTrackSkeleton.vue"
 import VBone from "~/components/VSkeleton/VBone.vue"
 
@@ -14,11 +16,9 @@ const props = withDefaults(
   defineProps<{
     isForTab?: SupportedSearchType
     numElems?: number
-    isSidebarVisible?: boolean
   }>(),
   {
     isForTab: "image",
-    isSidebarVisible: false,
   }
 )
 
@@ -39,6 +39,8 @@ const elementCount = computed(() => {
   }
   return 8
 })
+
+const isSidebarVisible = inject(IsSidebarVisibleKey, ref(false))
 </script>
 
 <template>
diff --git a/frontend/src/components/VSkeleton/meta/VGridSkeleton.stories.ts b/frontend/src/components/VSkeleton/meta/VGridSkeleton.stories.ts
index b99fd54d7f..c11c9ba2b5 100644
--- a/frontend/src/components/VSkeleton/meta/VGridSkeleton.stories.ts
+++ b/frontend/src/components/VSkeleton/meta/VGridSkeleton.stories.ts
@@ -1,4 +1,4 @@
-import { h } from "vue"
+import { supportedSearchTypes } from "~/constants/media"
 
 import VGridSkeleton from "~/components/VSkeleton/VGridSkeleton.vue"
 
@@ -7,42 +7,17 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 const meta = {
   title: "Components/Skeleton",
   component: VGridSkeleton,
+  argTypes: {
+    isForTab: { control: "select", options: supportedSearchTypes },
+  },
 } satisfies Meta<typeof VGridSkeleton>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-const Template: Story = {
-  render: (args) => ({
-    components: { VGridSkeleton },
-    setup() {
-      return () => h(VGridSkeleton, { isForTab: args.isForTab })
-    },
-  }),
-}
-export const AllTab: Story = {
-  ...Template,
-  name: "All tab",
-
-  args: {
-    isForTab: "all",
-  },
-}
-
-export const ImageTab: Story = {
-  ...Template,
-  name: "Image tab",
-
+export const Default: Story = {
+  name: "Grid Skeleton",
   args: {
     isForTab: "image",
   },
 }
-
-export const AudioTab = {
-  ...Template,
-  name: "Audio tab",
-
-  args: {
-    isForTab: "audio",
-  },
-}
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
index 86e322a874..b41377a7eb 100644
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -258,6 +258,8 @@
       --color-modal-layer: var(--color-gray-12-60);
       --color-new-highlight: var(--color-yellow-3);
       --color-gray-new-highlight: var(--color-gray-1-20);
+      --color-skeleton-base: var(--color-gray-2);
+      --color-skeleton-secondary: var(--color-gray-3);
     }
   }
 
@@ -316,6 +318,8 @@
     --color-modal-layer: var(--color-gray-12-80);
     --color-new-highlight: var(--color-pink-6);
     --color-gray-new-highlight: var(--color-gray-12-20);
+    --color-skeleton-base: var(--color-gray-2);
+    --color-skeleton-secondary: var(--color-gray-3);
   }
 
   :is(.dark-mode *),
@@ -373,6 +377,8 @@
     --color-modal-layer: var(--color-gray-12-60);
     --color-new-highlight: var(--color-yellow-3);
     --color-gray-new-highlight: var(--color-gray-1-20);
+    --color-skeleton-base: var(--color-gray-11);
+    --color-skeleton-secondary: var(--color-gray-10);
   }
 
   body {