Track status of IIcons

Author: xingrz

src/components/Editor.vue

@@ -17,7 +17,7 @@ import 'ace-code/styles/theme/tomorrow.css';
 import * as RDT from '@/editor/rdt';
 
 import type ISelection from '@/types/selection';
-import type IIcon from '@/types/icon';
+import type { IIcon } from '@/types/icon';
 
 import bindEditorValue from '@/composables/bindEditorValue';
 import bindEditorSelection from '@/composables/bindEditorSelection';
@@ -69,7 +69,7 @@ class Completer implements Ace.Completer {
 
   getCompletions(_editor: Ace.Editor, _session: Ace.EditSession, _pos: Ace.Point, _prefix: string, callback: Ace.CompleterCallback): void {
     callback(null, Object.keys(props.icons)
-      .filter((icon) => !!props.icons[icon])
+      .filter((icon) => props.icons[icon]?.status == 'ready')
       .map((icon) => ({ value: icon })));
   }
 

src/stores/icon.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import md5 from 'md5';
 
-import type IIcon from '@/types/icon';
+import type { IIcon } from '@/types/icon';
 
 const baseUrl = 'https://upload.wikimedia.org/wikipedia/commons';
 
@@ -16,25 +16,25 @@ function loadImage(url: string): Promise<HTMLImageElement> {
 }
 
 export const useIconStore = defineStore('icon', () => {
-  const icons = ref<Record<string, IIcon | null>>({});
+  const icons = ref<Record<string, IIcon>>({});
 
-  function patch(name: string, icon: IIcon | null): void {
+  function patch(name: string, icon: IIcon): void {
     icons.value = {
       ...icons.value,
       [name]: icon,
     };
   }
 
   function fetching(name: string): void {
-    patch(name, null);
+    patch(name, { status: 'loading' });
   }
 
   function fetched(name: string, data: string) {
-    patch(name, { data, ratio: 1 });
+    patch(name, { status: 'ready', data, ratio: 1 });
   }
 
   function failed(name: string): void {
-    patch(name, null);
+    patch(name, { status: 'failed' });
   }
 
   function resolved(name: string, ratio: number) {

src/types/icon.ts

@@ -1,4 +1,13 @@
-export default interface IIcon {
+export type IIcon = {
+  status: string;
+  data?: string;
+  ratio?: number;
+} & ({
+  status: 'loading';
+} | {
+  status: 'failed';
+} | {
+  status: 'ready';
   data: string;
   ratio: number;
-}
+});