Load IPA Dictionary asynchronously

Author: aryanpingle

dist/ipa_dict.json

@@ -125,6 +125,7 @@ function getSettings(obj: RunicEditor): VNode {
 }
 
 const initialEnglishText = "Tunic\nSecret Legend!";
+const initialPhoneticText = "tunɪk\nsikɹət ɫɛdʒənd!";
 
 export class RunicEditor extends Component<Props, State> {
     runeSVGElement?: RuneSVG;
@@ -133,7 +134,6 @@ export class RunicEditor extends Component<Props, State> {
     phoneticInput?: TextInput;
 
     componentDidMount(): void {
-        this.onEnglishChange(initialEnglishText);
     }
 
     // Listeners
@@ -232,6 +232,7 @@ export class RunicEditor extends Component<Props, State> {
                         placeholder="Type something here"
                         name="text-input--phonetic"
                         bindInput={this.onPhoneticChange}
+                        value={initialPhoneticText}
                         spellcheck={false}
                     />
                 </div>
@@ -244,7 +245,7 @@ export class RunicEditor extends Component<Props, State> {
                             ref={(e) => (this.runeSVGElement = e)}
                             interactive={false}
                             displayPhonemes={false}
-                            phoneticText="sikɹət ɫɛdʒənd"
+                            phoneticText={initialPhoneticText}
                         ></RuneSVG>
                     </div>
                     <hr />

src/components/RunicEditor/index.tsx

@@ -28,8 +28,8 @@ function addThemeListener() {
     mediaQuery.addEventListener("change", setTheme);
 }
 
-async function setup() {
-    await loadIPADict();
+function setup() {
+    loadIPADict();
 
     addThemeListener();
 

src/index.tsx

@@ -1,5 +1,3 @@
-import { symbolDataTable } from "./runeDataset";
-
 const IPADictURL = "./ipa_dict.json";
 
 let IPADict: Record<string, string> = {};
@@ -8,13 +6,14 @@ export async function loadIPADict() {
     // Load the dictionary
     const response = await fetch(IPADictURL);
     IPADict = await response.json();
+    console.log("Loaded IPA Dictionary.")
 }
 
 /**
  * Convert a word from English to Phonetic.
  */
 export function translateWord(word: string): string | null {
-    return word in IPADict ? IPADict[word][0].replace(/\s+/g, "") : null;
+    return word in IPADict ? IPADict[word] : null;
 }
 
 /**