fix: run sparkline pulse animation only once (#1818)

Author: graphieros

app/components/Package/WeeklyDownloadStats.vue

@@ -97,12 +97,6 @@ const { colors } = useCssVariables(
   },
 )
 
-function toggleSparklineAnimation() {
-  settings.value.sidebar.animateSparkline = !settings.value.sidebar.animateSparkline
-}
-
-const hasSparklineAnimation = computed(() => settings.value.sidebar.animateSparkline)
-
 const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const accentColorValueById = computed<Record<string, string>>(() => {
@@ -254,8 +248,8 @@ const config = computed<VueUiSparklineConfig>(() => {
       line: {
         color: colors.value.borderHover,
         pulse: {
-          show: hasSparklineAnimation.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
-          loop: true, // runs only once if false
+          show: true, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
+          loop: false,
           radius: 1.5,
           color: pulseColor.value!,
           easing: 'ease-in-out',
@@ -333,23 +327,9 @@ const config = computed<VueUiSparklineConfig>(() => {
                     <SkeletonInline class="h-px w-full" />
                   </div>
                 </div>
-                <!-- Animation toggle placeholder -->
-                <div class="w-full hidden motion-safe:flex flex-1 items-end justify-end">
-                  <SkeletonInline class="h-[20px] w-30" />
-                </div>
               </div>
             </template>
           </ClientOnly>
-
-          <div v-if="hasWeeklyDownloads" class="hidden motion-safe:flex justify-end p-1">
-            <ButtonBase size="small" @click="toggleSparklineAnimation">
-              {{
-                hasSparklineAnimation
-                  ? $t('package.trends.pause_animation')
-                  : $t('package.trends.play_animation')
-              }}
-            </ButtonBase>
-          </div>
         </template>
         <p v-else class="py-2 text-sm font-mono text-fg-subtle">
           {{ $t('package.trends.no_data') }}

app/composables/useSettings.ts

@@ -38,7 +38,6 @@ export interface AppSettings {
   }
   sidebar: {
     collapsed: string[]
-    animateSparkline: boolean
   }
   chartFilter: {
     averageWindow: number
@@ -61,7 +60,6 @@ const DEFAULT_SETTINGS: AppSettings = {
   },
   sidebar: {
     collapsed: [],
-    animateSparkline: true,
   },
   chartFilter: {
     averageWindow: 0,

i18n/locales/az-AZ.json

@@ -384,8 +384,6 @@
         "likes": "Bəyənmələr",
         "contributors": "Əməkdaşlar"
       },
-      "play_animation": "Animasiyanı başlat",
-      "pause_animation": "Animasiyanı dayandır",
       "copy_alt": {
         "trend_none": "əsasən sabit",
         "trend_strong": "güclü",

i18n/locales/bg-BG.json

@@ -410,8 +410,6 @@
         "likes": "Харесвания",
         "contributors": "Сътрудници"
       },
-      "play_animation": "Пускане на анимация",
-      "pause_animation": "Пауза на анимация",
       "data_correction": "Корекция на данни",
       "average_window": "Прозорец за средна стойност",
       "smoothing": "Изглаждане",

i18n/locales/cs-CZ.json

@@ -389,8 +389,6 @@
         "likes": "Lajky",
         "contributors": "Přispěvatelé"
       },
-      "play_animation": "Přehrát animaci",
-      "pause_animation": "Pozastavit animaci",
       "data_correction": "Oprava dat",
       "average_window": "Okno průměru",
       "smoothing": "Vyhlazování",

i18n/locales/de-DE.json

@@ -389,8 +389,6 @@
         "likes": "Likes",
         "contributors": "Mitwirkende"
       },
-      "play_animation": "Animation abspielen",
-      "pause_animation": "Animation pausieren",
       "data_correction": "Datenkorrektur",
       "average_window": "Durchschnittsfenster",
       "smoothing": "Glättung",

i18n/locales/en.json

@@ -443,8 +443,6 @@
         "likes": "Likes",
         "contributors": "Contributors"
       },
-      "play_animation": "Play animation",
-      "pause_animation": "Pause animation",
       "data_correction": "Data correction",
       "average_window": "Average window",
       "smoothing": "Smoothing",

i18n/locales/es.json

@@ -410,8 +410,6 @@
         "likes": "Me gusta",
         "contributors": "Colaboradores"
       },
-      "play_animation": "Reproducir animación",
-      "pause_animation": "Pausar animación",
       "data_correction": "Corrección de datos",
       "average_window": "Ventana de promedio",
       "smoothing": "Suavizado",

i18n/locales/fr-FR.json

@@ -413,8 +413,6 @@
         "likes": "J'aime",
         "contributors": "Contributeurs"
       },
-      "play_animation": "Lancer l'animation",
-      "pause_animation": "Mettre l'animation en pause",
       "data_correction": "Correction des données",
       "average_window": "Plage de moyenne",
       "smoothing": "Lissage",

i18n/locales/hu-HU.json

@@ -410,8 +410,6 @@
         "likes": "Kedvelések",
         "contributors": "Közreműködők"
       },
-      "play_animation": "Animáció lejátszása",
-      "pause_animation": "Animáció szüneteltetése",
       "data_correction": "Adatkorrekció",
       "average_window": "Átlagos ablak",
       "smoothing": "Simítás",