Make wikilinks translucent if the target file does not exist

index.html

@@ -166,8 +166,12 @@
 		<template id="template-wikilink">
 			<style>
 				.wikilink {
-					color: var(--color-accent);
+					color: color-mix(in srgb, var(--color-accent) 50%, transparent);
 					text-decoration: underline 1px solid currentColor;
+				}
+
+				.wikilink[href] {
+					color: var(--color-accent);
 					cursor: pointer;
 				}
 			</style>

src/elements/markdown/wikilink.mjs

@@ -88,7 +88,13 @@ export class WikilinkElement extends CustomElement {
         this.anchorElement = this.instance.querySelector(this.constructor.ANCHOR_SELECTOR)
     }
 
-    resetAnchorElementProperties() {
+    resetAnchorElementInnerText() {
+        this.anchorElement.innerText = this.text
+    }
+
+    async resetAnchorElementHref() {
+        await this.vault.sleepUntilFileIndexIsAvailable()
+
         let path = null
         if(this.target.startsWith(".")) {
             path = filePath(this.display.path + "/" + this.target).join("/")
@@ -102,16 +108,16 @@ export class WikilinkElement extends CustomElement {
             }
         }
 
-        if(path !== null) {
+        if(path !== undefined) {
             this.anchorElement.href = this.browse.urlFor({path}).toString()
         }
-        this.anchorElement.innerText = this.text
     }
 
     onConnect() {
         super.onConnect()
         this.recalculateAncestors()
         this.recalculateAnchorElement()
-        this.resetAnchorElementProperties()
+        this.resetAnchorElementInnerText()
+        this.resetAnchorElementHref().then()
     }
 }

src/elements/vault.mjs

@@ -161,6 +161,24 @@ export class VaultElement extends CustomElement {
             this.fileIndex = null
         }
         this.fileIndex = await response.json()
+        this.#fileIndexQueue.forEach(resolve => resolve(undefined))
+    }
+
+    /**
+     * Array of resolve {@link Promise} objects of tasks awaiting {@link sleepUntilFileIndexIsAvailable}.
+     * @type {((v: undefined) => void)[]}
+     */
+    #fileIndexQueue = []
+
+    /**
+     * Await until {@link fileIndex} becomes available.
+     * @returns {Promise<void>}
+     */
+    async sleepUntilFileIndexIsAvailable() {
+        if(this.fileIndex) {
+            return
+        }
+        await new Promise(resolve => this.#fileIndexQueue.push(resolve))
     }
 
     async onConnect() {