Merge pull request framer#470 from framer/airtable-spinner

Add loading spinner to Airtable log in button

Author: madebyisaacr

plugins/airtable/src/Login.tsx

@@ -1,7 +1,7 @@
 import "./App.css"
 
 import { framer } from "framer-plugin"
-import { useLayoutEffect, useRef } from "react"
+import { useLayoutEffect, useRef, useState } from "react"
 import auth from "./auth"
 import { showLoginUI } from "./ui"
 
@@ -10,6 +10,7 @@ interface AuthenticationProps {
 }
 
 export function Authenticate({ onAuthenticated }: AuthenticationProps) {
+    const [isLoading, setIsLoading] = useState(false)
     const pollInterval = useRef<number | ReturnType<typeof setInterval>>()
 
     useLayoutEffect(() => {
@@ -35,6 +36,8 @@ export function Authenticate({ onAuthenticated }: AuthenticationProps) {
     const login = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault()
 
+        setIsLoading(true)
+
         const task = async () => {
             try {
                 // Retrieve the auth URL and a set of read and write keys
@@ -49,6 +52,8 @@ export function Authenticate({ onAuthenticated }: AuthenticationProps) {
                 onAuthenticated()
             } catch (e) {
                 framer.notify(e instanceof Error ? e.message : "An unknown error ocurred")
+            } finally {
+                setIsLoading(false)
             }
         }
 
@@ -67,8 +72,8 @@ export function Authenticate({ onAuthenticated }: AuthenticationProps) {
                 <li>Map the table fields to the CMS</li>
             </ol>
 
-            <button className="action-button" type="submit">
-                Log In
+            <button className="action-button" type="submit" aria-label={isLoading ? "Logging in" : "Log in"}>
+                {isLoading ? <div className="framer-spinner" /> : "Log In"}
             </button>
         </form>
     )