\n {!(pageNum === 1 && isLoading) && children}\n {isLoading && (\n
\n \n \n {loadingLabel}\n \n
\n )}\n
\n );\n};\nexport default InfiniteScroll;\n","import AnimateInView from '@atoms/AnimateInView/AnimateInView';\nimport SiteEnum from '@models/enums/SiteEnum';\nimport { IArticleCard } from '@models/IArticleCard';\nimport { IArticleFilterItem, IArticleListing } from '@models/IArticleListing';\nimport { PageTitleSize } from '@models/IPageTitle';\nimport ArticleCard from '@molecules/ArticleCard/ArticleCard';\nimport ArticleListingLinkCard from '@molecules/ArticleListingLinkCard/ArticleListingLinkCard';\nimport FilterList from '@molecules/FilterList/FilterList';\nimport InfiniteScroll from '@molecules/InfiniteScroll/InfiniteScroll';\nimport PageTitle from '@molecules/PageTitle/PageTitle';\nimport HeadlineAndTextBlock from '@organisms/HeadlineAndTextBlock/HeadlineAndTextBlock';\nimport { fadeInUp, fadeTransition } from '@utility/config/animations';\nimport useListingComponentData from '@utility/hooks/useListingComponentData';\nimport useMediaQuery from '@utility/hooks/useMediaQuery';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\nimport queryString from 'query-string';\nimport { useEffect, useState } from 'react';\n\ntype FetchPayload = {\n filterIds: string;\n epslanguage?: string;\n take: number;\n skip: number;\n pageLinkId?: string;\n};\n\ntype QueryParams = {\n filterIds?: string;\n};\n\nconst cardProps = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: fadeTransition,\n className: 'tw-col-span-4 md:tw-col-span-3 lg:tw-col-span-6 xl:tw-col-span-4',\n};\n\nconst ArticleListing = ({\n filters,\n infiniteLoadLabel,\n initialItems,\n language,\n listingCard,\n loadingLabel,\n pageLinkId,\n pageSize,\n searchEndpoint,\n showListingCardWhenFiltered,\n site,\n smallTitle = false,\n text,\n title,\n totalResults,\n}: IArticleListing) => {\n const [listItems, setListItems] = useState(initialItems ?? []);\n const [loadingMessage, setLoadingMessage] = useState(loadingLabel);\n const isMobile = useMediaQuery(767);\n const listingCardPosition = isMobile ? 4 : 6;\n\n //'Take' value varies depending on the presence of the Listing Card and page number\n const getTakeValue = (noActiveFilter: boolean, skip: number) => {\n const hasListingCard =\n (noActiveFilter || showListingCardWhenFiltered) && listingCard;\n const isPageOne = skip === 0;\n\n return hasListingCard && isPageOne ? pageSize - 1 : pageSize;\n };\n\n const [queryState, setQueryState] = useState<\n | {\n activeFilter: IArticleFilterItem | null;\n skip: number;\n take: number;\n isDefaultData: boolean;\n pageLinkId: string;\n }\n | undefined\n >();\n\n // Populate queryState using url query params on client side\n useEffect(() => {\n const params: QueryParams =\n typeof window !== 'undefined'\n ? queryString.parse(\n queryString.pick(window?.location.search, ['filterIds'])\n )\n : { filterIds: undefined };\n\n const activeFilter = params.filterIds\n ? getFilterByID(params.filterIds, filters)\n : null;\n\n setQueryState({\n skip: 0,\n take: getTakeValue(!activeFilter, 0),\n activeFilter,\n isDefaultData: !activeFilter && !!initialItems,\n pageLinkId: pageLinkId,\n });\n }, [queryString]);\n\n const { fetchData, state } = useListingComponentData<\n FetchPayload,\n { items: IArticleCard[]; totalResults: number }\n >(\n searchEndpoint,\n { items: initialItems ?? [], totalResults: totalResults ?? 0 },\n false\n );\n\n useEffect(() => {\n // Flag to ensure fetch doesn't run on page load\n // default data is provided by items prop\n if (!queryState || queryState.isDefaultData) return;\n\n let payload: FetchPayload = {\n filterIds: queryState.activeFilter?.id ?? '',\n take: queryState.take,\n skip: queryState.skip,\n pageLinkId: queryState.pageLinkId,\n };\n\n if (language && pageLinkId) {\n payload = {\n ...payload,\n epslanguage: language,\n pageLinkId,\n };\n }\n\n if (queryState.skip === 0) setListItems([]);\n fetchData(payload);\n }, [queryState]);\n\n useEffect(() => {\n // If skip is greater than 0 then the next page of data should be appended\n if (queryState && queryState.skip > 0) {\n setListItems([...listItems, ...state.data.items]);\n return;\n }\n\n setListItems(state.data.items);\n }, [state.data]);\n\n return (\n