perf: speed up settings autofilling by only calling db calls once

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@clerk/nextjs": "^5.1.5",
     "@clerk/themes": "^2.1.9",
+    "@clerk/types": "^4.6.1",
     "@hookform/resolvers": "^3.6.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",

src/app/settings/page.tsx

@@ -28,27 +28,20 @@ import {
   QueryClient,
 } from "@tanstack/react-query";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
+import type { UsersTableType } from "@/server/db/schema";
 
 const queryClient = new QueryClient();
 
-function PaperlessURL({
-  setActiveTab,
-}: {
+interface FormProps {
   setActiveTab: Dispatch<SetStateAction<number>>;
-}) {
-  const { user, isLoaded } = useUser();
-  const pathname = usePathname();
+  userData: UsersTableType;
+}
+
+function PaperlessURL({ setActiveTab, userData }: FormProps) {
   const [isAutofilled, setIsAutofilled] = useState(false);
   const formSchema = z.object({
     URL: z.string(),
   });
-  const { data: userData, isLoading } = useQuery({
-    queryKey: ["userData"],
-    queryFn: async () => {
-      const data = await getUserData();
-      return data;
-    },
-  });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -57,17 +50,11 @@ function PaperlessURL({
     },
   });
 
-  if (!isLoaded || isLoading || !userData) {
-    return <LoadingSpinner>Loading...</LoadingSpinner>;
-  } else if (userData.paperlessURL && !isAutofilled) {
+  if (userData.paperlessURL && !isAutofilled) {
     form.setValue("URL", userData.paperlessURL);
     setIsAutofilled(true);
   }
 
-  if (!user) {
-    return redirect("/sign-in?redirect=" + pathname);
-  }
-
   async function onSubmit(values: z.infer<typeof formSchema>) {
     if (values.URL == "") {
       setActiveTab((prevTab) => prevTab + 2); // Skip api key form
@@ -114,43 +101,24 @@ function PaperlessURL({
   );
 }
 
-function PaperlessToken({
-  setActiveTab,
-}: {
-  setActiveTab: Dispatch<SetStateAction<number>>;
-}) {
-  const { user, isLoaded } = useUser();
-  const pathname = usePathname();
+function PaperlessToken({ setActiveTab, userData }: FormProps) {
   const [isAutofilled, setIsAutofilled] = useState(false);
   const [isHidden, setIsHidden] = useState(false);
   const formSchema = z.object({
     token: z.string(),
   });
-  const { data: userData, isLoading } = useQuery({
-    queryKey: ["userData"],
-    queryFn: async () => {
-      const data = await getUserData();
-      return data;
-    },
-  });
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       token: "",
     },
   });
 
-  if (!isLoaded || isLoading || !userData) {
-    return <LoadingSpinner>Loading...</LoadingSpinner>;
-  } else if (userData.paperlessToken && !isAutofilled) {
+  if (userData.paperlessToken && !isAutofilled) {
     form.setValue("token", userData.paperlessToken);
     setIsAutofilled(true);
   }
 
-  if (!user) {
-    return redirect("/sign-in?redirect=" + pathname);
-  }
-
   async function onSubmit(values: z.infer<typeof formSchema>) {
     setActiveTab((prevTab) => prevTab + 1); // Increment activeTab
 
@@ -229,23 +197,55 @@ const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
   );
 };
 
-export default function SettingsPage() {
+export function Forms() {
   const [activeTab, setActiveTab] = useState(0);
+  const { user: clerkUser, isLoaded } = useUser();
+  const pathname = usePathname();
+
+  const { data: userData, isLoading } = useQuery({
+    queryKey: ["userData"],
+    queryFn: async () => {
+      const data = await getUserData();
+      return data;
+    },
+  });
+
+  if (!userData || isLoading || !isLoaded) {
+    return <LoadingSpinner>Loading...</LoadingSpinner>;
+  } else if (!clerkUser) {
+    return redirect("/sign-in?redirect=" + pathname);
+  }
 
   const formElements = [
-    <PaperlessURL key="paperlessURL" setActiveTab={setActiveTab} />,
-    <PaperlessToken key="paperlessToken" setActiveTab={setActiveTab} />,
+    <PaperlessURL
+      key="paperlessURL"
+      setActiveTab={setActiveTab}
+      userData={userData}
+    />,
+    <PaperlessToken
+      key="paperlessToken"
+      setActiveTab={setActiveTab}
+      userData={userData}
+    />,
   ];
   return (
     <>
-      <QueryClientProvider client={queryClient}>
-        {formElements[activeTab]}
-      </QueryClientProvider>
+      {formElements[activeTab]}
       <ProgressIndicator
         activeTab={activeTab}
         totalTabs={formElements.length}
         setActiveTab={setActiveTab}
       />
+    </>
+  );
+}
+
+export default function SettingsPage() {
+  return (
+    <>
+      <QueryClientProvider client={queryClient}>
+        <Forms />
+      </QueryClientProvider>
       <Toaster />
     </>
   );