diff --git a/apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx b/apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx index 98f6504376..9530a8f6c0 100644 --- a/apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx +++ b/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) => { { e.preventDefault() onSubmit(gif.images.downsized.url) }} - fetchGifs={inputValue === '' ? fetchGifsTrending : fetchGifs} + fetchGifs={debouncedInputValue === '' ? fetchGifsTrending : fetchGifs} width={475} columns={3} className="my-4" diff --git a/apps/builder/playwright/tests/bubbles/image.spec.ts b/apps/builder/playwright/tests/bubbles/image.spec.ts index 33ffc3d09b..ef055603dd 100644 --- a/apps/builder/playwright/tests/bubbles/image.spec.ts +++ b/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',