From d10361ab807d6ca53a78b60de0b56b4a2f73220e Mon Sep 17 00:00:00 2001
From: Angelo Veltens <angelo.veltens@codecentric.de>
Date: Fri, 29 Oct 2021 19:06:38 +0200
Subject: [PATCH] hide button while loading

---
 src/content/Toolbar.spec.tsx |  9 +++++----
 src/content/Toolbar.tsx      | 17 ++++++++++-------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/content/Toolbar.spec.tsx b/src/content/Toolbar.spec.tsx
index c5693f2..f44ff9c 100644
--- a/src/content/Toolbar.spec.tsx
+++ b/src/content/Toolbar.spec.tsx
@@ -21,12 +21,12 @@ describe('Toolbar', () => {
       expect(screen.getByText('Jane Doe')).toBeInTheDocument();
     });
 
-    it('disables the clip it button', () => {
+    it('hides the clip it button', () => {
       render(<Toolbar profile={{ name: 'Jane Doe' }} />);
 
-      expect(screen.queryByText('Clip it!')).toBeInTheDocument();
-      const button = screen.getByText('Clip it!');
-      expect(button).toBeDisabled();
+      const button = screen.queryByRole('button');
+      expect(button).not.toBeInTheDocument();
+      expect(screen.queryByText('Clip it!')).not.toBeInTheDocument();
     });
   });
 
@@ -91,6 +91,7 @@ describe('Toolbar', () => {
       it('shows an error if the bookmark cannot be saved', () => {
         (useBookmark as jest.Mock).mockReturnValue({
           saving: false,
+          loading: false,
           error: new Error('Pod not available'),
           addBookmark,
         });
diff --git a/src/content/Toolbar.tsx b/src/content/Toolbar.tsx
index 3b33937..33da12e 100644
--- a/src/content/Toolbar.tsx
+++ b/src/content/Toolbar.tsx
@@ -11,16 +11,19 @@ interface Props {
 export const Toolbar = ({ profile }: Props) => {
   const page = usePage();
   const { addBookmark, loading, saving, error, bookmark } = useBookmark(page);
+  const waiting = loading || saving;
   return (
     <>
       <p className="my-1">{profile.name}</p>
-      <button
-        className="my-1 px-4 py-2 bg-blue-400 rounded text-white hover:opacity-90 font-bold"
-        disabled={loading || saving}
-        onClick={() => addBookmark()}
-      >
-        {saving ? 'Saving...' : 'Clip it!'}
-      </button>
+      {loading ? null : (
+        <button
+          className="my-1 px-4 py-2 bg-blue-400 rounded text-white hover:opacity-90 font-bold"
+          disabled={waiting}
+          onClick={() => addBookmark()}
+        >
+          {saving ? 'Saving...' : 'Clip it!'}
+        </button>
+      )}
       {error && <p>{error.message}</p>}
       {bookmark && (
         <p className="my-1 text-blue-400 opacity-90 hover:opacity-100">