Skip to content

improvement(tour): fix tour auto-start logic and standardize selectors #3751

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 2 commits into from
Mar 25, 2026
Merged

improvement(tour): fix tour auto-start logic and standardize selectors #3751

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4deabfc
improvement(tour): fix tour auto-start logic and standardize selectors
waleedlatif1 Mar 25, 2026
7fddadf
fix(tour): address PR review comments
waleedlatif1 Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fix(tour): address PR review comments 
- Move autoStartAttempted.add() inside timer callback to prevent
  blocking auto-start when tour first mounts while disabled
- Memoize setJoyrideRef with useCallback to prevent ref churn
- Remove unused joyrideRef
  • Loading branch information
@waleedlatif1
waleedlatif1 committed Mar 25, 2026
commit 7fddadf63a9327f1659a7ef523187496e31dff26
27 changes: 15 additions & 12 deletions apps/sim/app/workspace/[workspaceId]/components/product-tour/tour-shared.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { createContext, useContext, useEffect, useRef, useState } from 'react'
import { createContext, useCallback, useContext, useEffect, useState } from 'react'
import type { TooltipRenderProps } from 'react-joyride'
import { TourTooltip } from '@/components/emcn'

Expand Down Expand Up @@ -60,7 +60,6 @@ export function TourTooltipAdapter({
}: TooltipRenderProps) {
const { isTooltipVisible, isEntrance, totalSteps } = useContext(TourStateContext)
const [targetEl, setTargetEl] = useState<HTMLElement | null>(null)
Comment thread
waleedlatif1 marked this conversation as resolved.
const joyrideRef = useRef<HTMLDivElement | null>(null)

useEffect(() => {
const { target } = step
Expand All @@ -76,17 +75,21 @@ export function TourTooltipAdapter({
/**
* Forwards the Joyride tooltip ref safely, handling both
* callback refs and RefObject refs from the library.
* Memoized to prevent ref churn (null → node cycling) on re-renders.
*/
const setJoyrideRef = (node: HTMLDivElement | null) => {
joyrideRef.current = node
const { ref } = tooltipProps
if (!ref) return
if (typeof ref === 'function') {
ref(node)
} else {
;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node
}
}
const setJoyrideRef = useCallback(
(node: HTMLDivElement | null) => {
const { ref } = tooltipProps
if (!ref) return
if (typeof ref === 'function') {
ref(node)
} else {
;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[tooltipProps.ref]
)

const placement = mapPlacement(step.placement)

Expand Down
9 changes: 4 additions & 5 deletions apps/sim/app/workspace/[workspaceId]/components/product-tour/use-tour.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,12 +174,12 @@ export function useTour({

/** Auto-start on first visit (once per page session per tour) */
useEffect(() => {
if (autoStartAttempted.has(storageKey)) return
autoStartAttempted.add(storageKey)
if (disabled || autoStartAttempted.has(storageKey) || isTourCompleted(storageKey)) return

const timer = setTimeout(() => {
if (disabledRef.current || isTourCompleted(storageKey)) return
if (disabledRef.current) return

autoStartAttempted.add(storageKey)
Comment thread
waleedlatif1 marked this conversation as resolved.
setStepIndex(0)
setIsEntrance(true)
setIsTooltipVisible(false)
Expand All @@ -189,8 +189,7 @@ export function useTour({
}, autoStartDelay)

return () => clearTimeout(timer)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [disabled, storageKey, autoStartDelay, tourName, scheduleReveal])

/** Listen for manual trigger events */
useEffect(() => {
Expand Down
Loading