From 161e7289270f03dcc0d5cd685e5ebe0e05c084d0 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Tue, 25 Mar 2025 13:45:31 -0400
Subject: [PATCH] [+] Scanning icon

---
 web/src/App.svelte | 9 ++++++++-
 web/src/app.sass   | 8 ++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index efb4ee7..5e30e15 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Icon from "@iconify/svelte";
   import { post } from "./sdk";
   import { slide } from "svelte/transition";
 
@@ -107,7 +108,13 @@
     </div>
     <button on:click={addCard}>添加</button>
     {#if nfcAvail}
-      <button on:click={startNFCScan}>NFC 扫描</button>
+      <button on:click={startNFCScan}>
+        {#if nfcScanning}
+          <Icon icon="line-md:loading-twotone-loop" /> NFC 扫描中... 
+        {:else}
+          NFC 扫描
+        {/if}
+      </button>
     {/if}
   </div>
 </main>
diff --git a/web/src/app.sass b/web/src/app.sass
index 830b3e2..68b1d3a 100644
--- a/web/src/app.sass
+++ b/web/src/app.sass
@@ -49,6 +49,11 @@ button
   background-color: #1a1a1a
   cursor: pointer
   transition: border-color 0.25s
+  
+  display: flex
+  align-items: center
+  justify-content: center
+  gap: 0.5rem
 
 button:hover 
   border-color: #646cff
@@ -57,6 +62,9 @@ button:focus,
 button:focus-visible 
   outline: 4px auto -webkit-focus-ring-color
 
+svg.iconify
+  display: inline-block
+
 // Expand and shrink (breathing) animation when clicked
 //@keyframes breathing
 //  0%