fix(ui): Profile avatar image motion setting #3044 (#3066)

Co-authored-by: null <null>

components/account/AccountAvatar.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-defineProps<{
+const { account, square } = defineProps<{
   account: mastodon.v1.Account
   square?: boolean
 }>()
 
 const loaded = ref(false)
 const error = ref(false)
+
+const preferredMotion = usePreferredReducedMotion()
+const accountAvatarSrc = computed(() => {
+  return preferredMotion.value === 'reduce' ? account.avatarStatic : account.avatar
+})
 </script>
 
 <template>
@@ -16,7 +21,7 @@ const error = ref(false)
     width="400"
     height="400"
     select-none
-    :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
+    :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : accountAvatarSrc"
     :alt="$t('account.avatar_description', [account.username])"
     loading="lazy"
     class="account-avatar"