chore: optimize imports and useShallow

apps/sim/app/(landing)/blog/[slug]/page.tsx

@@ -60,7 +60,6 @@ export default async function Page({ params }: { params: Promise<{ slug: string
  sizes='(max-width: 768px) 100vw, 450px'
  priority
  itemProp='image'
- unoptimized
  />
  </div>
  </div>
@@ -144,7 +143,6 @@ export default async function Page({ params }: { params: Promise<{ slug: string
  className='h-[160px] w-full object-cover'
  sizes='(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'
  loading='lazy'
- unoptimized
  />
  <div className='p-3'>
  <div className='mb-1 text-[#999] text-xs'>

apps/sim/app/(landing)/blog/authors/[id]/page.tsx

@@ -64,7 +64,6 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
  width={600}
  height={315}
  className='h-[160px] w-full object-cover transition-transform group-hover:scale-[1.02]'
- unoptimized
  />
  <div className='p-3'>
  <div className='mb-1 text-[#999] text-xs'>

apps/sim/app/(landing)/blog/post-grid.tsx

@@ -32,7 +32,6 @@ export function PostGrid({ posts }: { posts: Post[] }) {
  src={p.ogImage}
  alt={p.title}
  sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
- unoptimized
  priority={index < 6}
  loading={index < 6 ? undefined : 'lazy'}
  fill

apps/sim/app/chat/components/voice-interface/voice-interface.tsx

@@ -3,9 +3,17 @@
 import { type RefObject, useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Mic, MicOff, Phone } from 'lucide-react'
+import dynamic from 'next/dynamic'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/core/utils/cn'
-import { ParticlesVisualization } from '@/app/chat/components/voice-interface/components/particles'
+
+const ParticlesVisualization = dynamic(
+ () =>
+ import('@/app/chat/components/voice-interface/components/particles').then(
+ (mod) => mod.ParticlesVisualization
+ ),
+ { ssr: false }
+)
 
 const logger = createLogger('VoiceInterface')
 

apps/sim/app/templates/components/template-card.tsx

@@ -1,6 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Star, User } from 'lucide-react'
+import Image from 'next/image'
 import { useParams, useRouter } from 'next/navigation'
 import { VerifiedBadge } from '@/components/ui/verified-badge'
 import { cn } from '@/lib/core/utils/cn'
@@ -281,9 +282,14 @@ function TemplateCardInner({
  <div className='mt-[10px] flex items-center justify-between'>
  <div className='flex min-w-0 items-center gap-[8px]'>
  {authorImageUrl ? (
- <div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
- <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
- </div>
+ <Image
+ src={authorImageUrl}
+ alt={author}
+ width={20}
+ height={20}
+ className='flex-shrink-0 rounded-full object-cover'
+ unoptimized
+ />
  ) : (
  <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-7)]'>
  <User className='h-[12px] w-[12px] text-[var(--text-muted)]' />

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx

@@ -36,7 +36,7 @@ function WorkflowsListInner({
  searchQuery: string
  segmentDurationMs: number
 }) {
- const { workflows } = useWorkflowRegistry()
+ const workflows = useWorkflowRegistry((s) => s.workflows)
 
  return (
  <div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx

@@ -2,6 +2,7 @@
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Loader2 } from 'lucide-react'
+import { useShallow } from 'zustand/react/shallow'
 import { Skeleton } from '@/components/emcn'
 import { formatLatency } from '@/app/workspace/[workspaceId]/logs/utils'
 import type { DashboardStatsResponse, WorkflowStats } from '@/hooks/queries/logs'
@@ -146,7 +147,14 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
  const [lastAnchorIndices, setLastAnchorIndices] = useState<Record<string, number>>({})
  const lastAnchorIndicesRef = useRef<Record<string, number>>({})
 
- const { workflowIds, searchQuery, toggleWorkflowId, timeRange } = useFilterStore()
+ const { workflowIds, searchQuery, toggleWorkflowId, timeRange } = useFilterStore(
+ useShallow((s) => ({
+ workflowIds: s.workflowIds,
+ searchQuery: s.searchQuery,
+ toggleWorkflowId: s.toggleWorkflowId,
+ timeRange: s.timeRange,
+ }))
+ )
 
  const allWorkflows = useWorkflowRegistry((state) => state.workflows)
 

apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx

@@ -3,6 +3,7 @@
 import { memo, useCallback, useMemo, useState } from 'react'
 import { ArrowUp, Bell, Library, MoreHorizontal, RefreshCw } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { useShallow } from 'zustand/react/shallow'
 import {
  Button,
  Combobox,
@@ -195,7 +196,25 @@ export const LogsToolbar = memo(function LogsToolbar({
  setDateRange,
  clearDateRange,
  resetFilters,
- } = useFilterStore()
+ } = useFilterStore(
+ useShallow((s) => ({
+ level: s.level,
+ setLevel: s.setLevel,
+ workflowIds: s.workflowIds,
+ setWorkflowIds: s.setWorkflowIds,
+ folderIds: s.folderIds,
+ setFolderIds: s.setFolderIds,
+ triggers: s.triggers,
+ setTriggers: s.setTriggers,
+ timeRange: s.timeRange,
+ setTimeRange: s.setTimeRange,
+ startDate: s.startDate,
+ endDate: s.endDate,
+ setDateRange: s.setDateRange,
+ clearDateRange: s.clearDateRange,
+ resetFilters: s.resetFilters,
+ }))
+ )
 
  const [datePickerOpen, setDatePickerOpen] = useState(false)
  const [previousTimeRange, setPreviousTimeRange] = useState(timeRange)

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
+import { useShallow } from 'zustand/react/shallow'
 import {
  Bell,
  Button,
@@ -230,7 +231,30 @@ export default function Logs() {
  setTimeRange,
  setDateRange,
  clearDateRange,
- } = useFilterStore()
+ } = useFilterStore(
+ useShallow((s) => ({
+ setWorkspaceId: s.setWorkspaceId,
+ initializeFromURL: s.initializeFromURL,
+ timeRange: s.timeRange,
+ startDate: s.startDate,
+ endDate: s.endDate,
+ level: s.level,
+ workflowIds: s.workflowIds,
+ folderIds: s.folderIds,
+ setWorkflowIds: s.setWorkflowIds,
+ setSearchQuery: s.setSearchQuery,
+ triggers: s.triggers,
+ viewMode: s.viewMode,
+ setViewMode: s.setViewMode,
+ resetFilters: s.resetFilters,
+ setLevel: s.setLevel,
+ setFolderIds: s.setFolderIds,
+ setTriggers: s.setTriggers,
+ setTimeRange: s.setTimeRange,
+ setDateRange: s.setDateRange,
+ clearDateRange: s.clearDateRange,
+ }))
+ )
 
  useEffect(() => {
  setWorkspaceId(workspaceId)
@@ -1133,7 +1157,25 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
  setDateRange,
  clearDateRange,
  resetFilters,
- } = useFilterStore()
+ } = useFilterStore(
+ useShallow((s) => ({
+ level: s.level,
+ setLevel: s.setLevel,
+ workflowIds: s.workflowIds,
+ setWorkflowIds: s.setWorkflowIds,
+ folderIds: s.folderIds,
+ setFolderIds: s.setFolderIds,
+ triggers: s.triggers,
+ setTriggers: s.setTriggers,
+ timeRange: s.timeRange,
+ setTimeRange: s.setTimeRange,
+ startDate: s.startDate,
+ endDate: s.endDate,
+ setDateRange: s.setDateRange,
+ clearDateRange: s.clearDateRange,
+ resetFilters: s.resetFilters,
+ }))
+ )
 
  const [datePickerOpen, setDatePickerOpen] = useState(false)
  const [previousTimeRange, setPreviousTimeRange] = useState(timeRange)

apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Star, User } from 'lucide-react'
+import Image from 'next/image'
 import { useParams, useRouter } from 'next/navigation'
 import { VerifiedBadge } from '@/components/ui/verified-badge'
 import { cn } from '@/lib/core/utils/cn'
@@ -288,9 +289,14 @@ function TemplateCardInner({
  <div className='mt-[10px] flex items-center justify-between'>
  <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
  {authorImageUrl ? (
- <div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
- <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
- </div>
+ <Image
+ src={authorImageUrl}
+ alt={author}
+ width={20}
+ height={20}
+ className='flex-shrink-0 rounded-full object-cover'
+ unoptimized
+ />
  ) : (
  <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-7)]'>
  <User className='h-[12px] w-[12px] text-[var(--text-tertiary)]' />

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

@@ -11,6 +11,7 @@ import {
  Square,
  X,
 } from 'lucide-react'
+import { useShallow } from 'zustand/react/shallow'
 import {
  Badge,
  Button,
@@ -220,7 +221,7 @@ interface StartInputFormatField {
  * position across sessions using the floating chat store.
  */
 export function Chat() {
- const { activeWorkflowId } = useWorkflowRegistry()
+ const activeWorkflowId = useWorkflowRegistry((s) => s.activeWorkflowId)
  const blocks = useWorkflowStore((state) => state.blocks)
  const triggerWorkflowUpdate = useWorkflowStore((state) => state.triggerUpdate)
  const setSubBlockValue = useSubBlockStore((state) => state.setValue)
@@ -242,7 +243,26 @@ export function Chat() {
  getConversationId,
  clearChat,
  exportChatCSV,
- } = useChatStore()
+ } = useChatStore(
+ useShallow((s) => ({
+ isChatOpen: s.isChatOpen,
+ chatPosition: s.chatPosition,
+ chatWidth: s.chatWidth,
+ chatHeight: s.chatHeight,
+ setIsChatOpen: s.setIsChatOpen,
+ setChatPosition: s.setChatPosition,
+ setChatDimensions: s.setChatDimensions,
+ messages: s.messages,
+ addMessage: s.addMessage,
+ selectedWorkflowOutputs: s.selectedWorkflowOutputs,
+ setSelectedWorkflowOutput: s.setSelectedWorkflowOutput,
+ appendMessageContent: s.appendMessageContent,
+ finalizeMessageStream: s.finalizeMessageStream,
+ getConversationId: s.getConversationId,
+ clearChat: s.clearChat,
+ exportChatCSV: s.exportChatCSV,
+ }))
+ )
 
  const hasConsoleHydrated = useTerminalConsoleStore((state) => state._hasHydrated)
  const entriesFromStore = useTerminalConsoleStore((state) => state.entries)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx

@@ -3,6 +3,7 @@
 import type React from 'react'
 import { useMemo } from 'react'
 import { RepeatIcon, SplitIcon } from 'lucide-react'
+import { useShallow } from 'zustand/react/shallow'
 import { Combobox, type ComboboxOptionGroup } from '@/components/emcn'
 import { getEffectiveBlockOutputs } from '@/lib/workflows/blocks/block-outputs'
 import { hasTriggerCapability } from '@/lib/workflows/triggers/trigger-utils'
@@ -80,7 +81,14 @@ export function OutputSelect({
  maxHeight = 200,
 }: OutputSelectProps) {
  const blocks = useWorkflowStore((state) => state.blocks)
- const { isShowingDiff, isDiffReady, hasActiveDiff, baselineWorkflow } = useWorkflowDiffStore()
+ const { isShowingDiff, isDiffReady, hasActiveDiff, baselineWorkflow } = useWorkflowDiffStore(
+ useShallow((s) => ({
+ isShowingDiff: s.isShowingDiff,
+ isDiffReady: s.isDiffReady,
+ hasActiveDiff: s.hasActiveDiff,
+ baselineWorkflow: s.baselineWorkflow,
+ }))
+ )
  const subBlockValues = useSubBlockStore((state) =>
  workflowId ? state.workflowValues[workflowId] : null
  )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx

@@ -58,7 +58,7 @@ const commands: CommandItem[] = [
 export function CommandList() {
  const params = useParams()
  const router = useRouter()
- const { open: openSearchModal } = useSearchModalStore()
+ const openSearchModal = useSearchModalStore((s) => s.open)
  const preventZoomRef = usePreventZoom()
 
  const workspaceId = params.workspaceId as string | undefined
@@ -195,7 +195,6 @@ export function CommandList() {
  filter:
  'brightness(0) saturate(100%) invert(69%) sepia(0%) saturate(0%) hue-rotate(202deg) brightness(94%) contrast(89%)',
  }}
- priority
  />
  </div>
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx

@@ -85,7 +85,7 @@ export function VariablesInput({
  const params = useParams()
  const workflowId = params.workflowId as string
  const [storeValue, setStoreValue] = useSubBlockValue<VariableAssignment[]>(blockId, subBlockId)
- const { variables: workflowVariables } = useVariablesStore()
+ const workflowVariables = useVariablesStore((s) => s.variables)
  const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
 
  const [showTags, setShowTags] = useState(false)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/hooks/use-toolbar-resize.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { useToolbarStore } from '@/stores/panel'
 
 /**
@@ -76,7 +77,12 @@ export function useToolbarResize({
  triggersContentRef,
  triggersHeaderRef,
 }: UseToolbarResizeProps) {
- const { toolbarTriggersHeight, setToolbarTriggersHeight } = useToolbarStore()
+ const { toolbarTriggersHeight, setToolbarTriggersHeight } = useToolbarStore(
+ useShallow((s) => ({
+ toolbarTriggersHeight: s.toolbarTriggersHeight,
+ setToolbarTriggersHeight: s.setToolbarTriggersHeight,
+ }))
+ )
 
  const [isResizing, setIsResizing] = useState(false)
  const startYRef = useRef<number>(0)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { PANEL_WIDTH } from '@/stores/constants'
 import { usePanelStore } from '@/stores/panel'
 
@@ -13,7 +14,13 @@ const CONTENT_WINDOW_GAP = 8
  * @returns Resize state and handlers
  */
 export function usePanelResize() {
- const { setPanelWidth, isResizing, setIsResizing } = usePanelStore()
+ const { setPanelWidth, isResizing, setIsResizing } = usePanelStore(
+ useShallow((s) => ({
+ setPanelWidth: s.setPanelWidth,
+ isResizing: s.isResizing,
+ setIsResizing: s.setIsResizing,
+ }))
+ )
 
  /**
  * Handles mouse down on resize handle