refactor(web): simplify Onboarding component structure and improve readability

Author: tyler-dane

packages/web/src/views/Onboarding/components/Onboarding.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { useOnboardingShortcuts } from "../hooks/useOnboardingShortcuts";
 
@@ -158,19 +158,13 @@ export const Onboarding: React.FC<Props> = ({
   };
 
   const currentStep = steps[currentStepIndex];
-  const StepComponent = currentStep?.component;
-
-  if (!StepComponent) {
-    return null;
-  }
-
   // Get navigation control from step configuration
   const preventNavigation = currentStep.preventNavigation || false;
   const isNextBtnDisabled = currentStep.nextButtonDisabled || false;
   const canNavigateNext = currentStep.canNavigateNext !== false; // Default to true
   const handlesKeyboardEvents = currentStep.handlesKeyboardEvents || false;
+  const StepComponent = currentStep?.component;
 
-  // Use the keyboard shortcuts hook
   useOnboardingShortcuts({
     onNext: handleNext,
     onPrevious: handlePrevious,
@@ -180,6 +174,10 @@ export const Onboarding: React.FC<Props> = ({
     disablePrevious: currentStep.disablePrevious || false,
   });
 
+  if (!StepComponent) {
+    return null;
+  }
+
   // Handle navigation control changes from steps
   const handleNavigationControlChange = (shouldPrevent: boolean) => {
     setIsNavPrevented(shouldPrevent);