🚸 Auto scroll once picture choice images are fully loaded

packages/embeds/js/src/features/blocks/inputs/payment/components/PaymentForm.tsx

@@ -6,6 +6,7 @@ type Props = {
   context: BotContext
   options: PaymentInputBlock['options'] & RuntimeOptions
   onSuccess: () => void
+  onTransitionEnd: () => void
 }
 
 export const PaymentForm = (props: Props) => (
@@ -13,5 +14,6 @@ export const PaymentForm = (props: Props) => (
     onSuccess={props.onSuccess}
     options={props.options}
     context={props.context}
+    onTransitionEnd={props.onTransitionEnd}
   />
 )

packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx

@@ -14,6 +14,7 @@ type Props = {
   context: BotContext
   options: PaymentInputBlock['options'] & RuntimeOptions
   onSuccess: () => void
+  onTransitionEnd: () => void
 }
 
 const slotName = 'stripe-payment-form'
@@ -48,7 +49,10 @@ export const StripePaymentForm = (props: Props) => {
       layout: 'tabs',
     })
     paymentElement.mount('#payment-element')
-    setTimeout(() => setIsMounted(true), 1000)
+    setTimeout(() => {
+      setIsMounted(true)
+      props.onTransitionEnd()
+    }, 1000)
   })
 
   const handleSubmit = async (event: Event & { submitter: HTMLElement }) => {

packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx

@@ -1,6 +1,6 @@
 import { InputSubmitContent } from '@/types'
 import { PictureChoiceBlock } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
-import { For, Show, createSignal, onMount } from 'solid-js'
+import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
 import { Checkbox } from '../buttons/components/Checkbox'
 import { SendButton } from '@/components'
 import { isDefined, isEmpty, isSvgSrc } from '@typebot.io/lib'
@@ -12,12 +12,14 @@ type Props = {
   defaultItems: PictureChoiceBlock['items']
   options: PictureChoiceBlock['options']
   onSubmit: (value: InputSubmitContent) => void
+  onTransitionEnd: () => void
 }
 
 export const MultiplePictureChoice = (props: Props) => {
   let inputRef: HTMLInputElement | undefined
   const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
   const [selectedItemIds, setSelectedItemIds] = createSignal<string[]>([])
+  const [totalLoadedImages, setTotalLoadedImages] = createSignal(0)
 
   onMount(() => {
     if (!isMobile() && inputRef) inputRef.focus()
@@ -64,6 +66,18 @@ export const MultiplePictureChoice = (props: Props) => {
     )
   }
 
+  createEffect(() => {
+    if (
+      totalLoadedImages() ===
+      props.defaultItems.filter((item) => isDefined(item.pictureSrc)).length
+    )
+      props.onTransitionEnd()
+  })
+
+  const onImageLoad = () => {
+    setTotalLoadedImages((acc) => acc + 1)
+  }
+
   return (
     <form class="flex flex-col gap-2 w-full items-end" onSubmit={handleSubmit}>
       <Show when={props.options?.isSearchable}>
@@ -112,6 +126,7 @@ export const MultiplePictureChoice = (props: Props) => {
                 elementtiming={`Picture choice ${index() + 1}`}
                 fetchpriority={'high'}
                 class="m-auto"
+                onLoad={onImageLoad}
               />
               <div
                 class={

packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx

@@ -1,19 +1,21 @@
 import { SearchInput } from '@/components/inputs/SearchInput'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
-import { isSvgSrc } from '@typebot.io/lib/utils'
+import { isDefined, isSvgSrc } from '@typebot.io/lib/utils'
 import { PictureChoiceBlock } from '@typebot.io/schemas/features/blocks/inputs/pictureChoice'
-import { For, Show, createSignal, onMount } from 'solid-js'
+import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
 
 type Props = {
   defaultItems: PictureChoiceBlock['items']
   options: PictureChoiceBlock['options']
   onSubmit: (value: InputSubmitContent) => void
+  onTransitionEnd: () => void
 }
 
 export const SinglePictureChoice = (props: Props) => {
   let inputRef: HTMLInputElement | undefined
   const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
+  const [totalLoadedImages, setTotalLoadedImages] = createSignal(0)
 
   onMount(() => {
     if (!isMobile() && inputRef) inputRef.focus()
@@ -41,6 +43,18 @@ export const SinglePictureChoice = (props: Props) => {
     )
   }
 
+  createEffect(() => {
+    if (
+      totalLoadedImages() ===
+      props.defaultItems.filter((item) => isDefined(item.pictureSrc)).length
+    )
+      props.onTransitionEnd()
+  })
+
+  const onImageLoad = () => {
+    setTotalLoadedImages((acc) => acc + 1)
+  }
+
   return (
     <div class="flex flex-col gap-2 w-full">
       <Show when={props.options?.isSearchable}>
@@ -77,6 +91,7 @@ export const SinglePictureChoice = (props: Props) => {
                 elementtiming={`Picture choice ${index() + 1}`}
                 fetchpriority={'high'}
                 class="m-auto"
+                onLoad={onImageLoad}
               />
               <div
                 class={