feat: opt-in repeated pulse animation on download graph

Author: trueberryless

app/components/Package/WeeklyDownloadStats.vue

@@ -208,7 +208,7 @@ const dataset = computed<VueUiSparklineDatasetItem[]>(() =>
 
 const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
 
-const isLoop = shallowRef(false)
+const isLoop = shallowRef(settings.value.enableGraphPulseLooping)
 const showPulse = shallowRef(true)
 const keyboardShortcuts = useKeyboardShortcuts()
 

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 the reapeated animation of the pulse effect on the weekly download graph",
     "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"
         },