refactor(ui): derive three values instead of storing or memoizing them

- import-modal: browserId and profileId were state corrected by two effects
  when a reload dropped the selection. That commits and paints one frame in
  which the profile still belongs to the previously selected browser — and
  Import is enabled during it, submitting via a `profiles.find` that searches
  every browser's profiles. Both now fall back during render, and `selected`
  searches only the current browser's profiles. Covered by the existing
  'never leaves a profile selected that belongs to another browser' test.

- workflow.tsx: isWorkflowEmpty was a second useMemo over the same [blocks]
  dep computing exactly !hasBlocks, allocating its own Object.keys array.
  Both feed primitives, so neither memo bought identity stability.

- thinking-loader: an effect seeding cycleVariant whenever variant is defined,
  which `shown = variant ?? cycleVariant` can never read. On the one
  transition where cycleVariant becomes visible (variant going undefined) the
  cycling effect assigns it in every branch — settle, reduced-motion, and
  tick — in the same flush, so the seed was never observable.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/import-modal/import-modal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import type { BrowserImportProfile } from '@sim/desktop-bridge'
 import {
   ChipModal,
@@ -39,29 +39,29 @@ function browserOptions(profiles: BrowserImportProfile[]) {
  */
 export function ImportModal({ open, onOpenChange, profiles, pending, onImport }: ImportModalProps) {
   const browsers = useMemo(() => browserOptions(profiles), [profiles])
-  const [browserId, setBrowserId] = useState(browsers[0]?.value ?? '')
+  const [pickedBrowserId, setPickedBrowserId] = useState(browsers[0]?.value ?? '')
+
+  /**
+   * A reload can drop the browser or profile that was picked. Falling back here
+   * rather than correcting in an effect matters: the effect form commits and
+   * paints one frame in which the profile still belongs to the previously
+   * selected browser, and Import is enabled during it.
+   */
+  const browserId = browsers.some((browser) => browser.value === pickedBrowserId)
+    ? pickedBrowserId
+    : (browsers[0]?.value ?? '')
 
   const profilesForBrowser = useMemo(
     () => profiles.filter((profile) => profile.browserId === browserId),
     [browserId, profiles]
   )
-  const [profileId, setProfileId] = useState(profilesForBrowser[0]?.id ?? '')
-
-  // Keep the selection valid as the browser changes or the list reloads,
-  // rather than leaving a profile selected that belongs to another browser.
-  useEffect(() => {
-    if (!profilesForBrowser.some((profile) => profile.id === profileId)) {
-      setProfileId(profilesForBrowser[0]?.id ?? '')
-    }
-  }, [profileId, profilesForBrowser])
+  const [pickedProfileId, setPickedProfileId] = useState(profilesForBrowser[0]?.id ?? '')
 
-  useEffect(() => {
-    if (!browsers.some((browser) => browser.value === browserId)) {
-      setBrowserId(browsers[0]?.value ?? '')
-    }
-  }, [browserId, browsers])
+  const profileId = profilesForBrowser.some((profile) => profile.id === pickedProfileId)
+    ? pickedProfileId
+    : (profilesForBrowser[0]?.id ?? '')
 
-  const selected = profiles.find((profile) => profile.id === profileId) ?? null
+  const selected = profilesForBrowser.find((profile) => profile.id === profileId) ?? null
 
   return (
     <ChipModal open={open} onOpenChange={onOpenChange} srTitle='Import from your browser'>
@@ -79,7 +79,7 @@ export function ImportModal({ open, onOpenChange, profiles, pending, onImport }:
           title='Browser'
           options={browsers}
           value={browserId}
-          onChange={setBrowserId}
+          onChange={setPickedBrowserId}
           placeholder='Select a browser'
           align='start'
           disabled={pending || browsers.length === 0}
@@ -92,7 +92,7 @@ export function ImportModal({ open, onOpenChange, profiles, pending, onImport }:
             label: profile.profileLabel,
           }))}
           value={profileId}
-          onChange={setProfileId}
+          onChange={setPickedProfileId}
           placeholder='Select a profile'
           align='start'
           disabled={pending || profilesForBrowser.length === 0}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -574,7 +574,7 @@ const WorkflowContent = React.memo(
       embedded,
     })
 
-    const isWorkflowEmpty = useMemo(() => Object.keys(blocks).length === 0, [blocks])
+    const isWorkflowEmpty = !hasBlocks
 
     /** Handles OAuth connect events dispatched by Copilot tools. */
     useEffect(() => {

apps/sim/components/ui/thinking-loader.tsx

@@ -320,12 +320,6 @@ export function ThinkingLoader({
   const cycling = variant === undefined
   const [retainMorphStages, setRetainMorphStages] = useState(cycling)
 
-  useEffect(() => {
-    if (variant !== undefined) {
-      setCycleVariant(variant)
-    }
-  }, [variant])
-
   useEffect(() => {
     if (!cycling) return
     // Settle: stop the cycle and melt to the terminal orb (goo handles the morph).