feat: opt-in repeated pulse animation on download graph (#2121)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Alec Lloyd Probert <55991794+graphieros@users.noreply.github.com>

Author: 3 people

app/components/Package/WeeklyDownloadStats.vue

@@ -208,7 +208,6 @@ const dataset = computed<VueUiSparklineDatasetItem[]>(() =>
 
 const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
 
-const isLoop = shallowRef(false)
 const showPulse = shallowRef(true)
 const keyboardShortcuts = useKeyboardShortcuts()
 
@@ -307,7 +306,7 @@ function layEgg() {
   showPulse.value = false
   nextTick(() => {
     showPulse.value = true
-    isLoop.value = !isLoop.value
+    settings.value.enableGraphPulseLooping = !settings.value.enableGraphPulseLooping
     playEggPulse()
   })
 }
@@ -356,7 +355,7 @@ const config = computed<VueUiSparklineConfig>(() => {
         color: colors.value.borderHover,
         pulse: {
           show: showPulse.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
-          loop: isLoop.value,
+          loop: settings.value.enableGraphPulseLooping,
           radius: 1.5,
           color: pulseColor.value!,
           easing: 'ease-in-out',

app/composables/useSettings.ts

@@ -23,6 +23,8 @@ export interface AppSettings {
   preferredBackgroundTheme: BackgroundThemeId | null
   /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
   hidePlatformPackages: boolean
+  /** Enable weekly download graph pulse looping animation */
+  enableGraphPulseLooping: boolean
   /** User-selected locale */
   selectedLocale: LocaleObject['code'] | null
   /** Search provider for package search */
@@ -52,6 +54,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   includeTypesInInstall: true,
   accentColorId: null,
   hidePlatformPackages: true,
+  enableGraphPulseLooping: false,
   selectedLocale: null,
   preferredBackgroundTheme: null,
   searchProvider: import.meta.test ? 'npm' : 'algolia',

app/pages/settings.vue

@@ -142,6 +142,16 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
               :description="$t('settings.hide_platform_packages_description')"
               v-model="settings.hidePlatformPackages"
             />
+
+            <!-- Divider -->
+            <div class="border-t border-border my-4" />
+
+            <!-- Enable weekly download graph pulse looping animation -->
+            <SettingsToggle
+              :label="$t('settings.enable_graph_pulse_loop')"
+              :description="$t('settings.enable_graph_pulse_loop_description')"
+              v-model="settings.enableGraphPulseLooping"
+            />
           </div>
         </section>
 

i18n/locales/en.json

@@ -138,6 +138,8 @@
     "include_types_description": "Add {'@'}types package to install commands for untyped packages",
     "hide_platform_packages": "Hide platform-specific packages in search",
     "hide_platform_packages_description": "Hide native binary packages like {'@'}esbuild/linux-x64 from results",
+    "enable_graph_pulse_loop": "Enable looping of pulse effect on mini graph",
+    "enable_graph_pulse_loop_description": "Activate a continuous pulse animation on the weekly download graph. This animation may be distracting for some users.",
     "theme": "Theme",
     "theme_light": "Light",
     "theme_dark": "Dark",

i18n/schema.json

@@ -418,6 +418,12 @@
         "hide_platform_packages_description": {
           "type": "string"
         },
+        "enable_graph_pulse_loop": {
+          "type": "string"
+        },
+        "enable_graph_pulse_loop_description": {
+          "type": "string"
+        },
         "theme": {
           "type": "string"
         },