blsmedia/bot
2
0
Fork 0
Code Activity

feat(bot): ⚡️ Improve first paint delay

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-06-12 07:57:35 +02:00
parent 4fd5d452a3
commit aeaaa5c398
13 changed files with 42 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/bot-engine/src/components/ChatGroup/AvatarSideContainer.tsx
View File

@@ -33,6 +33,7 @@ export const AvatarSideContainer = forwardRef(
}))
useEffect(() => {
if (!document) return
setShow(true)
const resizeObserver = new ResizeObserver(refreshTopOffset)
resizeObserver.observe(document.body)

5
packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/EmbedBubble.tsx
View File

@@ -12,7 +12,7 @@ type Props = {
export const showAnimationDuration = 400
export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
const { typebot } = useTypebot()
const { typebot, isLoading } = useTypebot()
const messageContainer = useRef<HTMLDivElement | null>(null)
const [isTyping, setIsTyping] = useState(true)
@@ -22,9 +22,10 @@ export const EmbedBubble = ({ block, onTransitionEnd }: Props) => {
)
useEffect(() => {
if (!isTyping || isLoading) return
showContentAfterMediaLoad()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [isLoading])
const showContentAfterMediaLoad = () => {
setTimeout(() => {

5
packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/ImageBubble.tsx
View File

@@ -14,7 +14,7 @@ export const showAnimationDuration = 400
export const mediaLoadingFallbackTimeout = 5000
export const ImageBubble = ({ block, onTransitionEnd }: Props) => {
const { typebot } = useTypebot()
const { typebot, isLoading } = useTypebot()
const messageContainer = useRef<HTMLDivElement | null>(null)
const image = useRef<HTMLImageElement | null>(null)
const [isTyping, setIsTyping] = useState(true)
@@ -25,9 +25,10 @@ export const ImageBubble = ({ block, onTransitionEnd }: Props) => {
)
useEffect(() => {
if (!isTyping || isLoading) return
showContentAfterMediaLoad()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [isLoading])
const showContentAfterMediaLoad = () => {
if (!image.current) return

5
packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/TextBubble.tsx
View File

@@ -19,7 +19,7 @@ const defaultTypingEmulation = {
}
export const TextBubble = ({ block, onTransitionEnd }: Props) => {
const { typebot } = useTypebot()
const { typebot, isLoading } = useTypebot()
const messageContainer = useRef<HTMLDivElement | null>(null)
const [isTyping, setIsTyping] = useState(true)
@@ -28,6 +28,7 @@ export const TextBubble = ({ block, onTransitionEnd }: Props) => {
)
useEffect(() => {
if (!isTyping || isLoading) return
const typingTimeout = computeTypingTimeout(
block.content.plainText,
typebot.settings?.typingEmulation ?? defaultTypingEmulation
@@ -36,7 +37,7 @@ export const TextBubble = ({ block, onTransitionEnd }: Props) => {
onTypingEnd()
}, typingTimeout)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [isLoading])
const onTypingEnd = () => {
setIsTyping(false)

5
packages/bot-engine/src/components/ChatGroup/ChatBlock/bubbles/VideoBubble.tsx
View File

@@ -19,14 +19,15 @@ export const showAnimationDuration = 400
export const mediaLoadingFallbackTimeout = 5000
export const VideoBubble = ({ block, onTransitionEnd }: Props) => {
const { typebot } = useTypebot()
const { typebot, isLoading } = useTypebot()
const messageContainer = useRef<HTMLDivElement | null>(null)
const [isTyping, setIsTyping] = useState(true)
useEffect(() => {
if (!isTyping || isLoading) return
showContentAfterMediaLoad()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [isLoading])
const showContentAfterMediaLoad = () => {
setTimeout(() => {

2
packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/PaymentForm/StripePaymentForm.tsx
View File

@@ -42,7 +42,7 @@ export const StripePaymentForm = ({ options, onSuccess }: Props) => {
description: error.name + ' ' + error.message,
details: error.message,
})
if (!data) return
if (!data || !frameDocument || !frameWindow?.Stripe) return
await initStripe(frameDocument)
setStripe(frameWindow.Stripe(data.publicKey))
setClientSecret(data.clientSecret)