From 1e7cd2c3c543a7100d08c7160558c6700f4a63d2 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sun, 11 Dec 2022 19:24:16 +0100
Subject: [PATCH] Joined all Circle icons into Loading component

The loading component receives a promise which is used to display
states: loading, success and error. When displaying error you can reject
with string 'warning' to fail with another component.
---
 .../loading}/CircleCheckmark.svelte           |  8 ++--
 .../loading}/CircleError.svelte               |  8 ++--
 .../components/loading/CircleLoading.svelte   | 48 +++++++++++++++++++
 .../loading}/CircleWarning.svelte             |  8 ++--
 .../loading}/circle-feedback.scss             |  0
 src/lib/components/loading/index.svelte       | 22 +++++++++
 6 files changed, 79 insertions(+), 15 deletions(-)
 rename src/lib/{icons => components/loading}/CircleCheckmark.svelte (76%)
 rename src/lib/{icons => components/loading}/CircleError.svelte (76%)
 create mode 100644 src/lib/components/loading/CircleLoading.svelte
 rename src/lib/{icons => components/loading}/CircleWarning.svelte (76%)
 rename src/lib/{icons => components/loading}/circle-feedback.scss (100%)
 create mode 100644 src/lib/components/loading/index.svelte

diff --git a/src/lib/icons/CircleCheckmark.svelte b/src/lib/components/loading/CircleCheckmark.svelte
similarity index 76%
rename from src/lib/icons/CircleCheckmark.svelte
rename to src/lib/components/loading/CircleCheckmark.svelte
index 25a47d1..67737b8 100644
--- a/src/lib/icons/CircleCheckmark.svelte
+++ b/src/lib/components/loading/CircleCheckmark.svelte
@@ -1,6 +1,6 @@
 <svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <g transform="translate(24,24)">
-    <g class="loading-group CheckSuccess" opacity="0" style="animation-delay: 700ms">
+    <g class="loading-group CheckSuccess" opacity="0">
       <path
         class="loading-icon"
         fill="none"
@@ -10,8 +10,7 @@
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-dasharray="28 28"
-        stroke-dashoffset="28"
-        style="animation-delay: 700ms"></path>
+        stroke-dashoffset="28"></path>
     </g>
   </g>
   <path
@@ -25,8 +24,7 @@
     stroke-dasharray="145 145"
     stroke-linejoin="round"
     stroke-miterlimit="1"
-    transform="translate(24,24) rotate(-35)"
-    style="animation-delay: 700ms"></path>
+    transform="translate(24,24) rotate(-35)"></path>
 </svg>
 
 <style lang="scss" module="scoped">
diff --git a/src/lib/icons/CircleError.svelte b/src/lib/components/loading/CircleError.svelte
similarity index 76%
rename from src/lib/icons/CircleError.svelte
rename to src/lib/components/loading/CircleError.svelte
index eea3e1f..142ec83 100644
--- a/src/lib/icons/CircleError.svelte
+++ b/src/lib/components/loading/CircleError.svelte
@@ -1,6 +1,6 @@
 <svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <g transform="translate(24,24)">
-    <g class="loading-group CheckError" opacity="0" style="animation-delay: 700ms">
+    <g class="loading-group CheckError" opacity="0">
       <path
         class="loading-icon"
         fill="none"
@@ -10,8 +10,7 @@
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-dasharray="28 28"
-        stroke-dashoffset="28"
-        style="animation-delay: 700ms"></path>
+        stroke-dashoffset="28"></path>
     </g>
   </g>
   <path
@@ -25,8 +24,7 @@
     stroke-dasharray="145 145"
     stroke-linejoin="round"
     stroke-miterlimit="1"
-    transform="translate(24,24) rotate(-35)"
-    style="animation-delay: 700ms"></path>
+    transform="translate(24,24) rotate(-35)"></path>
 </svg>
 
 <style lang="scss" module="scoped">
diff --git a/src/lib/components/loading/CircleLoading.svelte b/src/lib/components/loading/CircleLoading.svelte
new file mode 100644
index 0000000..904a79d
--- /dev/null
+++ b/src/lib/components/loading/CircleLoading.svelte
@@ -0,0 +1,48 @@
+<svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <path
+    class="loading-circle"
+    fill="none"
+    stroke="grey"
+    stroke-width="2"
+    d="M23 0c0 12.7-10.3 23-23 23c-12.7 0-23-10.3-23-23c0-12.7 10.3-23 23-23c12.7 0 23 10.3 23 23"
+    stroke-linecap="round"
+    stroke-dashoffset="145"
+    stroke-dasharray="145 145"
+    stroke-linejoin="round"
+    stroke-miterlimit="1"
+    transform="translate(24,24) rotate(-35)"
+    style="animation-delay: 100ms"></path>
+</svg>
+
+<style lang="scss" module="scoped">
+  .loading-circle {
+    -webkit-animation: drawCircle 1.5s linear both;
+    animation: drawCircle 1.5s linear both;
+    animation-iteration-count: infinite;
+  }
+
+  svg {
+    animation: rotateCircle 1.5s linear both;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes rotateCircle {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes drawCircle {
+    0% {
+      stroke-dashoffset: 145px;
+    }
+
+    to {
+      stroke-dashoffset: -145px;
+    }
+  }
+</style>
diff --git a/src/lib/icons/CircleWarning.svelte b/src/lib/components/loading/CircleWarning.svelte
similarity index 76%
rename from src/lib/icons/CircleWarning.svelte
rename to src/lib/components/loading/CircleWarning.svelte
index 80a0d05..6f94b6d 100644
--- a/src/lib/icons/CircleWarning.svelte
+++ b/src/lib/components/loading/CircleWarning.svelte
@@ -1,6 +1,6 @@
 <svg width="49" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
   <g transform="translate(24,24)">
-    <g class="loading-group CheckWarning" opacity="0" style="animation-delay: 700ms">
+    <g class="loading-group CheckWarning" opacity="0">
       <path
         class="loading-icon"
         fill="none"
@@ -10,8 +10,7 @@
         stroke-linecap="round"
         stroke-linejoin="round"
         stroke-dasharray="28 28"
-        stroke-dashoffset="28"
-        style="animation-delay: 700ms"></path>
+        stroke-dashoffset="28"></path>
     </g>
   </g>
   <path
@@ -25,8 +24,7 @@
     stroke-dasharray="145 145"
     stroke-linejoin="round"
     stroke-miterlimit="1"
-    transform="translate(24,24) rotate(-35)"
-    style="animation-delay: 700ms"></path>
+    transform="translate(24,24) rotate(-35)"></path>
 </svg>
 
 <style lang="scss" module="scoped">
diff --git a/src/lib/icons/circle-feedback.scss b/src/lib/components/loading/circle-feedback.scss
similarity index 100%
rename from src/lib/icons/circle-feedback.scss
rename to src/lib/components/loading/circle-feedback.scss
diff --git a/src/lib/components/loading/index.svelte b/src/lib/components/loading/index.svelte
new file mode 100644
index 0000000..6171bef
--- /dev/null
+++ b/src/lib/components/loading/index.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import CircleLoading from './CircleLoading.svelte';
+  import CircleCheckmark from './CircleCheckmark.svelte';
+  import CircleWarning from './CircleWarning.svelte';
+  import CircleError from './CircleError.svelte';
+
+  export let promise: Promise<any>;
+</script>
+
+{#await promise}
+  <CircleLoading />
+{:then}
+  <CircleCheckmark />
+{:catch type}
+  {#if type === 'warning'}
+    <CircleWarning />
+  {:else if type === 'error'}
+    <CircleError />
+  {:else}
+    <CircleError />
+  {/if}
+{/await}