feat: Implement loading fallback and enhance wizard page with Suspense for better user experience

Author: spivx

app/new/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useMemo, useState } from "react"
+import { Suspense, useMemo, useState } from "react"
 
 import { Button } from "@/components/ui/button"
 import { InstructionsWizard } from "@/components/instructions-wizard"
@@ -21,6 +21,14 @@ const fileQuestion = fileQuestionSet[0] ?? null
 const fileOptionsFromData = buildFileOptionsFromQuestion(fileQuestion)
 
 export default function NewInstructionsPage() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <NewInstructionsPageContent />
+    </Suspense>
+  )
+}
+
+function NewInstructionsPageContent() {
   const searchParams = useSearchParams()
   const [showWizard, setShowWizard] = useState(false)
   const [selectedFileId, setSelectedFileId] = useState<string | null>(null)
@@ -125,3 +133,11 @@ export default function NewInstructionsPage() {
     </div>
   )
 }
+
+function LoadingFallback() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background text-sm text-muted-foreground">
+      Loading wizard…
+    </div>
+  )
+}

components/instructions-wizard.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Undo2 } from "lucide-react"
 
-import type { DataQuestionSource, FileOutputConfig, InstructionsWizardProps, Responses, WizardAnswer, WizardConfirmationIntent, WizardQuestion, WizardStep } from "@/types/wizard"
+import type { DataQuestionSource, InstructionsWizardProps, Responses, WizardAnswer, WizardConfirmationIntent, WizardQuestion, WizardStep } from "@/types/wizard"
 import { buildFilterPlaceholder, useAnswerFilter } from "@/hooks/use-answer-filter"
 import stacksData from "@/data/stacks.json"
 import generalData from "@/data/general.json"
@@ -189,7 +189,7 @@ export function InstructionsWizard({ onClose, selectedFileId, initialStackId }:
         responses,
         autoFilledQuestionMap
       ),
-    [fileSummaryQuestion, selectedFile, selectedFileFormatLabel, wizardSteps, responses, autoFilledQuestionMap]
+    [selectedFile, selectedFileFormatLabel, wizardSteps, responses, autoFilledQuestionMap]
   )
 
   const currentAnswerValue = currentQuestion ? responses[currentQuestion.id] : undefined
@@ -258,20 +258,18 @@ export function InstructionsWizard({ onClose, selectedFileId, initialStackId }:
     setActiveEditQuestionId(null)
   }, [])
 
-  if (!currentStep || !currentQuestion) {
-    return null
-  }
-
   const isAnswerSelected = (value: string) => {
-    if (currentQuestion.allowMultiple) {
+    if (currentQuestion?.allowMultiple) {
       return Array.isArray(currentAnswerValue) && currentAnswerValue.includes(value)
     }
 
     return currentAnswerValue === value
   }
 
   const advanceToNextQuestion = () => {
-    const isLastQuestionInStep = currentQuestionIndex === currentStep.questions.length - 1
+    const currentStepForAdvance = wizardSteps[currentStepIndex]
+    const isLastQuestionInStep =
+      currentStepForAdvance ? currentQuestionIndex === currentStepForAdvance.questions.length - 1 : false
     const isLastStep = currentStepIndex === wizardSteps.length - 1
 
     if (isLastQuestionInStep && isLastStep) {
@@ -390,6 +388,10 @@ export function InstructionsWizard({ onClose, selectedFileId, initialStackId }:
     void loadStackQuestions(stackAnswer.value, stackAnswer.label)
   }, [initialStackId, loadStackQuestions])
 
+  if (!currentStep || !currentQuestion) {
+    return null
+  }
+
   const applyDefaultsAcrossWizard = () => {
     setGeneratedFile(null)
     setAutoFilledQuestionMap({})
@@ -807,7 +809,7 @@ export function InstructionsWizard({ onClose, selectedFileId, initialStackId }:
 
           {showNoFilterMatches ? (
             <p className="mt-6 rounded-xl border border-border/70 bg-muted/30 px-4 py-6 text-sm text-muted-foreground">
-              No options match "{answerFilterQuery}". Try a different search.
+              No options match &ldquo;{answerFilterQuery}&rdquo;. Try a different search.
             </p>
           ) : (
             <WizardAnswerGrid

components/wizard-edit-answer-dialog.tsx

@@ -65,7 +65,7 @@ export function WizardEditAnswerDialog({ question, value, onAnswerSelect, onClos
 
         {showNoMatches ? (
           <p className="rounded-xl border border-border/70 bg-muted/30 px-4 py-6 text-sm text-muted-foreground">
-            No options match "{query}". Try a different search.
+            No options match &ldquo;{query}&rdquo;. Try a different search.
           </p>
         ) : (
           <WizardAnswerGrid answers={answers} onAnswerClick={onAnswerSelect} isSelected={isSelected} />