🐛 (bubbles) Fix giphy search input buggy

apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx

@@ -3,6 +3,7 @@ import { GiphyFetch } from '@giphy/js-fetch-api'
 import { Grid } from '@giphy/react-components'
 import { GiphyLogo } from 'assets/logos'
 import React, { useState } from 'react'
+import { useDebounce } from 'use-debounce'
 import { env, isEmpty } from 'utils'
 import { Input } from '../Textbox'
 
@@ -14,6 +15,7 @@ const giphyFetch = new GiphyFetch(env('GIPHY_API_KEY') as string)
 
 export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => {
   const [inputValue, setInputValue] = useState('')
+  const [debouncedInputValue] = useDebounce(inputValue, 500)
 
   const fetchGifs = (offset: number) =>
     giphyFetch.search(inputValue, { offset, limit: 10 })
@@ -38,12 +40,12 @@ export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => {
       </Flex>
       <Flex overflowY="scroll" maxH="400px">
         <Grid
-          key={inputValue}
+          key={debouncedInputValue}
           onGifClick={(gif, e) => {
             e.preventDefault()
             onSubmit(gif.images.downsized.url)
           }}
-          fetchGifs={inputValue === '' ? fetchGifsTrending : fetchGifs}
+          fetchGifs={debouncedInputValue === '' ? fetchGifsTrending : fetchGifs}
           width={475}
           columns={3}
           className="my-4"

apps/builder/playwright/tests/bubbles/image.spec.ts

@@ -85,7 +85,8 @@ test.describe.parallel('Image bubble block', () => {
       )
       const trendingfirstImageSrc = await firstGiphyImage.getAttribute('src')
       expect(trendingfirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
-      await page.fill('[placeholder="Search..."]', 'fun')
+      await page.type('[placeholder="Search..."]', 'fun')
+      await expect(page.locator('[placeholder="Search..."]')).toHaveValue('fun')
       await page.waitForTimeout(500)
       await expect(firstGiphyImage).toHaveAttribute(
         'src',