From 498be15a2914944c5f4464b4b3eca74d712bca65 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 13 Jul 2022 16:45:39 +0200
Subject: [PATCH] chore(Icon): improve component

---
 src/runtime/components/elements/Icon.vue | 31 ++++++++++++++----------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/runtime/components/elements/Icon.vue b/src/runtime/components/elements/Icon.vue
index 81b5bb9f..ca8f782b 100644
--- a/src/runtime/components/elements/Icon.vue
+++ b/src/runtime/components/elements/Icon.vue
@@ -1,33 +1,38 @@
 <template>
-  <Iconify v-if="icon" :icon="icon" />
+  <span v-if="isFetching" />
+  <Iconify v-else-if="icon" :icon="icon" />
   <Component :is="component" v-else-if="component" />
   <span v-else>{{ name }}</span>
 </template>
 
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import type { IconifyIcon } from '@iconify/vue'
-import { ref, watch, computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Icon as Iconify } from '@iconify/vue/dist/offline'
 import { loadIcon } from '@iconify/vue'
-import { useNuxtApp } from '#imports'
+import { useNuxtApp, useState } from '#imports'
 
-const nuxtApp = useNuxtApp()
 const props = defineProps({
   name: {
     type: String,
     required: true
   }
 })
-
-const icon: Ref<IconifyIcon | null> = ref(null)
+const nuxtApp = useNuxtApp()
+const state = useState('u-icons', () => ({}))
+const isFetching = ref(false)
+const icon = computed<IconifyIcon | null>(() => state.value?.[props.name])
 const component = computed(() => nuxtApp.vueApp.component(props.name))
-
-icon.value = await loadIcon(props.name).catch(_ => null)
-
-watch(() => props.name, async () => {
-  icon.value = await loadIcon(props.name).catch(_ => null)
-})
+const loadIconComponent = async () => {
+  if (component.value) { return }
+  if (!state.value?.[props.name]) {
+    isFetching.value = true
+    state.value[props.name] = await loadIcon(props.name).catch(() => null)
+    isFetching.value = false
+  }
+}
+watch(() => props.name, loadIconComponent)
+!component.value && (await loadIconComponent())
 </script>
 
 <script lang="ts">