From 5e60c9fc192a9fed68ce94dd4945b82b1c98aa9d Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 7 Jul 2022 00:29:37 +0800
Subject: [PATCH] refactor(avatar): disabled native lazy currently

---
 src/_utils/env/is-native-lazy-load.ts |  5 +++--
 src/avatar/demos/enUS/lazy.demo.vue   |  6 ++++--
 src/avatar/demos/zhCN/lazy.demo.vue   |  6 ++++--
 src/avatar/src/Avatar.tsx             | 22 +++++++++++-----------
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/_utils/env/is-native-lazy-load.ts b/src/_utils/env/is-native-lazy-load.ts
index 2d98785ce..65f06b949 100644
--- a/src/_utils/env/is-native-lazy-load.ts
+++ b/src/_utils/env/is-native-lazy-load.ts
@@ -1,2 +1,3 @@
-export const isImageSupportNativeLazy =
-  typeof document !== 'undefined' && 'loading' in document.createElement('img')
+export const isImageSupportNativeLazy = false
+// Keep it to false currently, we will provide a prop to make it configuable
+// typeof document !== 'undefined' && 'loading' in document.createElement('img')
diff --git a/src/avatar/demos/enUS/lazy.demo.vue b/src/avatar/demos/enUS/lazy.demo.vue
index 96de8d0f6..640a50dfe 100644
--- a/src/avatar/demos/enUS/lazy.demo.vue
+++ b/src/avatar/demos/enUS/lazy.demo.vue
@@ -9,8 +9,10 @@ You can use `lazy` to let image load after it enters viewport.
     id="image-scroll-container"
     style="overflow: auto; height: 100px; gap: 8px"
   >
-    <div v-for="i of range" :key="i">
+    <n-space vertical>
       <n-avatar
+        v-for="i of range"
+        :key="i"
         size="small"
         :src="
           'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg?t=' + i
@@ -20,7 +22,7 @@ You can use `lazy` to let image load after it enters viewport.
           root: '#image-scroll-container'
         }"
       />
-    </div>
+    </n-space>
   </div>
 </template>
 
diff --git a/src/avatar/demos/zhCN/lazy.demo.vue b/src/avatar/demos/zhCN/lazy.demo.vue
index cf7a91d67..bfd9022a8 100644
--- a/src/avatar/demos/zhCN/lazy.demo.vue
+++ b/src/avatar/demos/zhCN/lazy.demo.vue
@@ -9,8 +9,10 @@
     id="image-scroll-container"
     style="overflow: auto; height: 100px; gap: 8px"
   >
-    <div v-for="i of range" :key="i">
+    <n-space vertical>
       <n-avatar
+        v-for="i of range"
+        :key="i"
         size="small"
         :src="
           'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg?t=' + i
@@ -20,7 +22,7 @@
           root: '#image-scroll-container'
         }"
       />
-    </div>
+    </n-space>
   </div>
 </template>
 
diff --git a/src/avatar/src/Avatar.tsx b/src/avatar/src/Avatar.tsx
index 1ac53a368..98af9c39c 100644
--- a/src/avatar/src/Avatar.tsx
+++ b/src/avatar/src/Avatar.tsx
@@ -12,21 +12,21 @@ import {
   onBeforeUnmount
 } from 'vue'
 import { VResizeObserver } from 'vueuc'
-import { avatarGroupInjectionKey } from './context'
-import type { Size, ObjectFit } from './interface'
-import { tagInjectionKey } from '../../tag/src/Tag'
-import { useConfig, useTheme, useThemeClass } from '../../_mixins'
-import type { ThemeProps } from '../../_mixins'
-import { avatarLight } from '../styles'
-import type { AvatarTheme } from '../styles'
-import { createKey, color2Class, resolveWrappedSlot } from '../../_utils'
-import type { ExtractPublicPropTypes } from '../../_utils'
-import style from './styles/index.cssr'
+import { isImageSupportNativeLazy } from '../../_utils/env/is-native-lazy-load'
 import {
   IntersectionObserverOptions,
   observeIntersection
 } from '../../image/src/utils'
-import { isImageSupportNativeLazy } from '../../_utils/env/is-native-lazy-load'
+import { tagInjectionKey } from '../../tag/src/Tag'
+import { useConfig, useTheme, useThemeClass } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
+import { createKey, color2Class, resolveWrappedSlot } from '../../_utils'
+import type { ExtractPublicPropTypes } from '../../_utils'
+import { avatarLight } from '../styles'
+import type { AvatarTheme } from '../styles'
+import { avatarGroupInjectionKey } from './context'
+import type { Size, ObjectFit } from './interface'
+import style from './styles/index.cssr'
 
 export const avatarProps = {
   ...(useTheme.props as ThemeProps<AvatarTheme>),