hide button while loading

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,
         });

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">