src/lib/components/Loading.svelte

@@ -1,73 +0,0 @@
-<style>
-    .loader {
-        position: absolute;
-        top: calc(50% - 32px);
-        left: calc(50% - 32px);
-        width: 64px;
-        height: 64px;
-        border-radius: 50%;
-        perspective: 800px;
-    }
-
-    .inner {
-        position: absolute;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-    }
-
-    .inner.one {
-        left: 0%;
-        top: 0%;
-        animation: rotate-one 1s linear infinite;
-        border-bottom: 3px solid #efeffa;
-    }
-
-    .inner.two {
-        right: 0%;
-        top: 0%;
-        animation: rotate-two 1s linear infinite;
-        border-right: 3px solid #efeffa;
-    }
-
-    .inner.three {
-        right: 0%;
-        bottom: 0%;
-        animation: rotate-three 1s linear infinite;
-        border-top: 3px solid #efeffa;
-    }
-
-    @keyframes rotate-one {
-        0% {
-            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-        }
-        100% {
-            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-        }
-    }
-
-    @keyframes rotate-two {
-        0% {
-            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-        }
-        100% {
-            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-        }
-    }
-
-    @keyframes rotate-three {
-        0% {
-            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-        }
-        100% {
-            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-        }
-    }
-</style>
-
-<div class="loader">
-    <div class="inner one" />
-    <div class="inner two" />
-    <div class="inner three" />
-</div>

src/main.svelte

@@ -6,7 +6,6 @@
     import Skills from './skills.svelte';
 
     import Timeline from "./timeline.svelte";
-	import Loading from "$lib/components/Loading.svelte";
 </script>
 
 <style>
@@ -66,7 +65,11 @@
 </style>
 
 {#await getJson('/json/me.json')}
-    <Loading />
+    <div class="card">
+        <div class="card-header">
+            <h1>Loading...</h1>
+        </div>
+    </div>
 {:then info}
     <div class="main-card">
         <div class="card-header">

src/routes/repos/+page.svelte

@@ -4,7 +4,6 @@
     import { repos, loadRepos, addToast } from "$lib/stores";
     import { timeSince } from "$lib/api/git";
     import Card from "$lib/components/Cards/Card.svelte";
-    import Loading from "$lib/components/Loading.svelte";
 
     onMount(loadRepos);
 </script>
@@ -34,6 +33,6 @@
             {/each}
         </div>
     {:else}
-        <Loading />
+        <p>Loading repositories...</p>
     {/if}
 </div>