perf: dynamic import dicebear avatar styles

client/src/pages/admin-settings/ui/AdminSettingsPage.tsx

@@ -15,7 +15,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useUnit } from 'effector-react'
 import { useForm } from 'react-hook-form'
 import { apiClient } from '@/shared/api/client'
-import { AVATAR_STYLES, DEFAULT_STYLE_ID, getStyleById } from '@/shared/lib/avatar-styles'
+import { AVATAR_STYLE_LOADERS, DEFAULT_STYLE_ID, loadAvatarStyle } from '@/shared/lib/avatar-styles'
 import { $user, updateProfileFx } from '@/shared/model/auth'
 import type { UpdateProfileParams } from '@/shared/model/auth'
 import { UserAvatar } from '@/shared/ui/UserAvatar'
@@ -165,7 +165,7 @@ export function AdminSettingsPage() {
             <FormControl size="small" sx={{ minWidth: 140 }}>
               <InputLabel>Стиль</InputLabel>
               <Select value={selectedStyle} label="Стиль" onChange={(e) => setSelectedStyle(e.target.value)}>
-                {AVATAR_STYLES.map((s) => (
+                {AVATAR_STYLE_LOADERS.map((s) => (
                   <MenuItem key={s.id} value={s.id}>
                     {s.label}
                   </MenuItem>
@@ -174,10 +174,10 @@ export function AdminSettingsPage() {
             </FormControl>
             <Button
               variant="outlined"
-              onClick={() => {
+              onClick={async () => {
                 const seed = `${String(user.id)}_${Date.now()}`
-                const styleDef = getStyleById(selectedStyle)
-                const avatar = createAvatar(styleDef.style, { seed })
+                const style = await loadAvatarStyle(selectedStyle)
+                const avatar = createAvatar(style, { seed })
                 setPreviewSrc(avatar.toDataUri())
                 setPreviewStyle(selectedStyle)
               }}