Created JS function to fetch static JSON. Now loads data Asynchronously :)

rollup.config.js

@@ -0,0 +1,10 @@
+import json from '@rollup/plugin-json';
+
+export default {
+  input: 'src/index.js',
+  output: {
+    dir: 'output',
+    format: 'cjs'
+  },
+  plugins: [json()]
+};

src/lib/data.ts

@@ -0,0 +1,5 @@
+export async function getJson(path: string) {
+    let response = await fetch(path);
+    let users = await response.json();
+    return users;
+}

src/main.svelte

@@ -1,5 +1,5 @@
 <script>
-    import * as info from '../static/json/me.json';
+    import { getJson } from "$lib/data"  
 </script>
 
 <style>
@@ -50,10 +50,16 @@
 </style>
 
 <div class="card">
-    <h1>{info.name}</h1>
+    {#await getJson('/json/me.json')}
+        <h1>Loading...</h1>
+    {:then info}
+        <h1>{info.name}</h1>
 
-    <div class="flex-container">
+        <div class="flex-container">
-        <img class="profile" src={info.profile_photo} alt="{info.name}'s Profile Photo">
+            <img class="profile" src={info.profile_photo} alt="{info.name}'s Profile Photo">
-        <p class="about">{info.about}</p>
+            <p class="about">{info.about}</p>
-    </div>
+        </div>
+    {:catch error}
+        <h1>{error.message}</h1>
+    {/await}
 </div>

src/routes/+layout.svelte

@@ -1,5 +1,4 @@
 <script>
-    import json from '@rollup/plugin-json'
 </script>
 
 <style>