spinner and fix padding flicker

src/components/User.tsx

@@ -20,9 +20,9 @@ export default function User() {
           <a href="/api/auth/google">
             <button
               type="button"
-              class="p-1 md:py-2 md:px-3 rounded border flex items-center text-sm md:gap-2 shadow active:bg-gray-100"
+              class="rounded border p-1 px-2 flex items-center text-sm md:gap-2 shadow active:bg-gray-100"
             >
-              <img src="/google.svg" alt="Google Icon" class="h-6 w-6" />
+              <img src="/google.svg" alt="Google Icon" class="h-5 w-5" />
               <span class="hidden md:block">Sign in with Google</span>
             </button>
           </a>

src/components/UserProfile.tsx

@@ -1,6 +1,11 @@
+import { createSignal } from "solid-js";
 import { UserType } from "../../db/schema";
+import { Show } from "solid-js";
+import { Spinner } from "~/icons/Spinner";
 
 export default function UserProfile({ user }: { user: UserType }) {
+  const [clicked, setClicked] = createSignal(false);
+
   return (
     <div class="relative group cursor-pointer">
       <img
@@ -20,6 +25,7 @@ export default function UserProfile({ user }: { user: UserType }) {
         <button
           class="w-full mx-auto my-1 flex items-center gap-2 text-md justify-center hover:underline underline-offset-4"
           onClick={async () => {
+            setClicked(true);
             try {
               await fetch("/api/auth/logout");
               window.location.reload();
@@ -28,7 +34,9 @@ export default function UserProfile({ user }: { user: UserType }) {
             }
           }}
         >
-          Logout
+          <Show when={clicked()} fallback={<p>Loading</p>}>
+            <Spinner />
+          </Show>
         </button>
       </div>
     </div>

src/icons/Spinner.tsx

@@ -0,0 +1,29 @@
+export function Spinner() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.4em"
+      height="1.4em"
+      viewBox="0 0 24 24"
+      class="invert dark:invert-0"
+    >
+      <path
+        fill="black"
+        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+        opacity={0.25}
+      ></path>
+      <path
+        fill="black"
+        d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="0.75s"
+          repeatCount="indefinite"
+          type="rotate"
+          values="0 12 12;360 12 12"
+        ></animateTransform>
+      </path>
+    </svg>
+  );
+}