feat(wizard): enhance BookCreationWizard with loading state management

- Added a loading state to the BookCreationWizard to prevent multiple create requests during the book creation process.
- Introduced a ref to track the creation status, ensuring that the create function does not execute concurrently.
- Updated the component to reflect the new loading state in the UI, improving user experience during book creation.
- Cleaned up dependencies in PageGroupingMode and SectioningModeSelect to optimize performance.

Author: Eliezir

apps/studio/src/components/wizard/BookCreationWizard.tsx

@@ -1,5 +1,5 @@
 
-import { useState, useEffect, type CSSProperties } from "react"
+import { useState, useEffect, useRef, type CSSProperties } from "react"
 import { Trans, useLingui } from "@lingui/react/macro"
 import { Eye, ArrowLeft, ArrowRight, Zap, Loader2 } from "lucide-react"
 import { useStore } from "@tanstack/react-form"
@@ -200,6 +200,8 @@ export function BookCreationWizard() {
   const { apiKey, hasApiKey, azureKey, azureRegion, geminiKey } = useApiKey()
   const [previewOpen, setPreviewOpen] = useState(false)
   const [submitError, setSubmitError] = useState<string | null>(null)
+  const [isCreating, setIsCreating] = useState(false)
+  const creatingRef = useRef(false)
 
   const values = useStore(form.store, (s) => s.values)
   const { file, renderStrategy, editingLanguage, outputLanguages, styleguide } = values
@@ -251,7 +253,10 @@ export function BookCreationWizard() {
   }
 
   async function handleCreate() {
+    if (creatingRef.current) return
+    creatingRef.current = true
     setSubmitError(null)
+    setIsCreating(true)
     try {
       const book = await createMutation.mutateAsync({
         label: values.label.trim(),
@@ -274,6 +279,8 @@ export function BookCreationWizard() {
 
       navigate({ to: "/books/$label/$step", params: { label: book.label, step: "book" } })
     } catch (error) {
+      creatingRef.current = false
+      setIsCreating(false)
       setSubmitError(error instanceof Error ? error.message : t`Failed to create book.`)
     }
   }
@@ -343,8 +350,8 @@ export function BookCreationWizard() {
             key={currentStep}
             isLastStep={currentStep === STEPS.length}
             canContinue={canContinue}
-            canCreate={canCreate && !createMutation.isPending}
-            isCreating={createMutation.isPending}
+            canCreate={canCreate && !isCreating}
+            isCreating={isCreating}
             onBack={handleBack}
             onNext={handleNext}
             onCreate={handleCreate}

apps/studio/src/components/wizard/index.tsx

@@ -80,6 +80,12 @@ export function useDelayedPreviewFocus(focus: ImageProcessingPreviewFocus) {
   const { setPreviewFocus } = useWizard()
   const timerRef = useRef<ReturnType<typeof setTimeout>>(null)
 
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
   const onMouseEnter = useCallback(() => {
     timerRef.current = setTimeout(() => setPreviewFocus(focus), PREVIEW_HOVER_DELAY)
   }, [focus, setPreviewFocus])

apps/studio/src/components/wizard/step2LayoutOptions/PageGroupingMode.tsx

@@ -88,7 +88,7 @@ export function PageGroupingMode() {
       { value: "spread" as const, label: i18n._(GROUPING_OPTION_SPREAD_LABEL) },
       { value: "single" as const, label: i18n._(GROUPING_OPTION_SINGLE_LABEL) },
     ],
-    [i18n, i18n.locale],
+    [i18n.locale],
   )
 
   const recommendedOption = recommended
@@ -108,7 +108,7 @@ export function PageGroupingMode() {
         Diagram: SingleDiagram,
       },
     ],
-    [i18n, i18n.locale],
+    [i18n.locale],
   )
 
   return (

apps/studio/src/components/wizard/step2LayoutOptions/SectioningModeSelect.tsx

@@ -73,7 +73,7 @@ export function SectioningModeSelect({ id, value, onValueChange, recommended, pr
         label: i18n._(labelMsg),
         Icon,
       })),
-    [i18n, i18n.locale],
+    [i18n.locale],
   )
 
   const selected = options.find((o) => o.value === value)