add loader when deleting, add toast for error notifications

package.json

@@ -33,6 +33,7 @@
     "prettier-plugin-svelte": "^2.7.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.8.0",
+    "svelte-french-toast": "^1.0.3",
     "svelte-preprocess": "^4.10.7",
     "tailwindcss": "^3.1.8",
     "tslib": "^2.4.0",

src/components/Links.svelte

@@ -1,28 +1,24 @@
 <script lang="ts">
+  import toast, { Toaster } from "svelte-french-toast";
+
   import Delete from "./icons/Delete.svelte";
   import LockSolid from "./icons/LockSolid.svelte";
   import { orgHero } from "../stores/context";
   import { onMount } from "svelte";
   import Loader from "./Loader.svelte";
   let links = [];
 
-  let successMessage: string = null,
-    errorMessage: string = null,
-    isLoading: boolean = false;
+  let isLoading: boolean = false;
+  let deletingLink = [];
 
   chrome.runtime.onMessage.addListener((msg) => {
     if (msg.type === "delete_link_response") {
+      deletingLink = deletingLink.filter((id) => id !== msg.id);
+      deletingLink = [...deletingLink];
       if (msg.status === "success") {
-        successMessage = "Deleted!";
-        setTimeout(() => {
-          successMessage = "";
-        }, 2000);
         getLinks();
       } else {
-        errorMessage = `Error: ${msg.message}`;
-        setTimeout(() => {
-          errorMessage = "";
-        }, 2000);
+        toast.error(msg.message);
       }
     } else if (msg.type === "run_sync_response") {
       links = msg.data;
@@ -44,12 +40,7 @@
   });
 </script>
 
-{#if successMessage}<div class="p-2 text-center text-green-500 font-bold">
-    {successMessage}
-  </div>{/if}
-{#if errorMessage}<div class="p-2 text-center text-red-500 font-bold">
-    {errorMessage}
-  </div>{/if}
+<Toaster />
 <div class="overflow-x-auto p-3">
   {#if isLoading}
     <Loader />
@@ -81,15 +72,19 @@
             </td>
             <td class="p-2">
               <div class="flex justify-center">
-                <button
-                  on:click={(e) => {
-                    successMessage = null;
-                    errorMessage = null;
-                    deleteLink(link.id);
-                  }}
-                >
-                  <Delete />
-                </button>
+                {#if deletingLink.includes(link.id)}
+                  <Loader />
+                {:else}
+                  <button
+                    on:click={(e) => {
+                      deletingLink.push(link.id);
+                      deletingLink = [...deletingLink];
+                      deleteLink(link.id);
+                    }}
+                  >
+                    <Delete />
+                  </button>
+                {/if}
               </div>
             </td>
           </tr>

src/pages/background/index.ts

@@ -151,6 +151,7 @@ const deleteLink = async (id: string, refreshed: boolean = false) => {
       chrome.runtime.sendMessage({
         type: "delete_link_response",
         status: "success",
+        id,
       });
     })
     .catch((e: AxiosError) => {
@@ -159,6 +160,7 @@ const deleteLink = async (id: string, refreshed: boolean = false) => {
           type: "delete_link_response",
           status: "error",
           message: e.response.data["error"] as string,
+          id,
         });
         console.log("Could not delete link");
       } else if (!refreshed && e.response.status == 401) {