feature: Default server address for the bookmark and a spinner while its saving

3 files changed, 52 insertions, 13 deletions

diff --git a/packages/browser-extension/src/OptionsPage.tsx b/packages/browser-extension/src/OptionsPage.tsx
index e3a34bd9..11a1a76d 100644
--- a/packages/browser-extension/src/OptionsPage.tsx
+++ b/packages/browser-extension/src/OptionsPage.tsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import usePluginSettings from "./settings";
 
 export default function OptionsPage() {
@@ -7,35 +7,51 @@ export default function OptionsPage() {
   const apiKeyRef = useRef<HTMLInputElement>(null);
   const addressRef = useRef<HTMLInputElement>(null);
 
+  const [isSaved, setIsSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
   const onSave = () => {
+    if (apiKeyRef.current?.value == "") {
+      setError("API Key can't be empty");
+      return;
+    }
+    if (addressRef.current?.value == "") {
+      setError("Server addres can't be empty");
+      return;
+    }
     setSettings({
       apiKey: apiKeyRef.current?.value || "",
-      address: addressRef.current?.value || "",
+      address: addressRef.current?.value || "https://demo.hoarder.app",
     });
+    setTimeout(() => {
+      setIsSaved(false);
+    }, 2000);
+    setIsSaved(true);
   };
 
   return (
     <div className="flex flex-col space-y-2">
       <span className="text-lg">Settings</span>
       <hr />
-      <div className="flex space-x-2 pt-2">
-        <label className="m-auto h-full">API Key</label>
+      <p className="text-red-500">{error}</p>
+      <div className="flex space-x-2">
+        <label className="m-auto h-full">Server Address</label>
         <input
-          ref={apiKeyRef}
-          defaultValue={settings.apiKey}
+          ref={addressRef}
+          defaultValue={settings.address || "https://demo.hoarder.app"}
           className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
         />
       </div>
-      <div className="flex space-x-2">
-        <label className="m-auto h-full">Server Address</label>
+      <div className="flex space-x-2 pt-2">
+        <label className="m-auto h-full">API Key</label>
         <input
-          ref={addressRef}
-          defaultValue={settings.address}
+          ref={apiKeyRef}
+          defaultValue={settings.apiKey}
           className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
         />
       </div>
       <button className="rounded-lg border border-gray-200" onClick={onSave}>
-        Save
+        {isSaved ? "Saved!" : "Save"}
       </button>
     </div>
   );
diff --git a/packages/browser-extension/src/SavePage.tsx b/packages/browser-extension/src/SavePage.tsx
index 2de19def..955cc7cb 100644
--- a/packages/browser-extension/src/SavePage.tsx
+++ b/packages/browser-extension/src/SavePage.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Settings } from "./settings";
+import Spinner from "./Spinner";
 
 export default function SavePage({ settings }: { settings: Settings }) {
   const [loading, setLoading] = useState(true);
@@ -52,12 +53,16 @@ export default function SavePage({ settings }: { settings: Settings }) {
   }, [settings]);
 
   if (loading) {
-    return <div>Loading ...</div>;
+    return (
+      <div className="m-auto">
+        <Spinner />
+      </div>
+    );
   }
 
   if (error) {
     return <div className="text-red-500">{error} ...</div>;
   }
 
-  return <div>SAVED!</div>;
+  return <div className="m-auto text-lg">Bookmark Saved</div>;
 }
diff --git a/packages/browser-extension/src/Spinner.tsx b/packages/browser-extension/src/Spinner.tsx
new file mode 100644
index 00000000..9fd8839b
--- /dev/null
+++ b/packages/browser-extension/src/Spinner.tsx
@@ -0,0 +1,18 @@
+export default function Spinner() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="animate-spin"
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}