feat: add abortController for plugin list

Author: AbhishekA1509

src/Shared/Components/Plugin/PluginList.tsx

@@ -4,7 +4,13 @@ import PluginCard from './PluginCard'
 import { DetectBottom } from '../DetectBottom'
 import PluginCardSkeletonList from './PluginCardSkeletonList'
 import { PluginListParamsType, PluginListProps } from './types'
-import { GenericEmptyState, GenericFilterEmptyState, showError } from '../../../Common'
+import {
+    abortPreviousRequests,
+    GenericEmptyState,
+    GenericFilterEmptyState,
+    getIsRequestAborted,
+    showError,
+} from '../../../Common'
 import { getPluginStoreData } from './service'
 
 const PluginList = ({
@@ -18,23 +24,31 @@ const PluginList = ({
     isSelectable,
     handleClearFilters,
     showCardBorder,
+    getPluginStoreRef,
 }: PluginListProps) => {
     const { appId } = useParams<PluginListParamsType>()
 
     const [isLoadingMorePlugins, setIsLoadingMorePlugins] = useState<boolean>(false)
     const handleLoadMore = async () => {
         setIsLoadingMorePlugins(true)
         try {
-            const pluginDataResponse = await getPluginStoreData({
-                searchKey,
-                offset: pluginList.length,
-                selectedTags,
-                appId: appId ? +appId : null,
-            })
+            const pluginDataResponse = await abortPreviousRequests(
+                () =>
+                    getPluginStoreData({
+                        searchKey,
+                        offset: pluginList.length,
+                        selectedTags,
+                        appId: appId ? +appId : null,
+                        signal: getPluginStoreRef.current.signal,
+                    }),
+                getPluginStoreRef,
+            )
 
             handleDataUpdateForPluginResponse(pluginDataResponse, true)
         } catch (error) {
-            showError(error)
+            if (!getIsRequestAborted(error)) {
+                showError(error)
+            }
         } finally {
             setIsLoadingMorePlugins(false)
         }

src/Shared/Components/Plugin/PluginListContainer.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router'
 import { APIResponseHandler } from '../APIResponseHandler'
 import PluginTagSelect from './PluginTagSelect'
 import PluginList from './PluginList'
 import { FilterChips } from '../FilterChips'
 import PluginCardSkeletonList from './PluginCardSkeletonList'
-import { SearchBar, useAsync } from '../../../Common'
+import { abortPreviousRequests, getIsRequestAborted, SearchBar, useAsync } from '../../../Common'
 import { getAvailablePluginTags, getPluginStoreData } from './service'
 import {
     PluginListParamsType,
@@ -44,6 +44,7 @@ const PluginListContainer = ({
     const [filters, setFilters] = useState<PluginListFiltersType>(
         parentFilters || structuredClone(DEFAULT_PLUGIN_LIST_FILTERS),
     )
+    const abortControllerRef: PluginListProps['getPluginStoreRef'] = useRef(new AbortController())
 
     const handlePluginListUpdate = (updatedPluginList: PluginListItemType[]) => {
         setPluginList(updatedPluginList)
@@ -62,16 +63,21 @@ const PluginListContainer = ({
 
     const { searchKey, selectedTags } = filters || {}
 
-    // TODO: Add abortController as well
+    const getPluginStoreDataWrapper = () =>
+        abortPreviousRequests(
+            () =>
+                getPluginStoreData({
+                    searchKey,
+                    selectedTags,
+                    offset: 0,
+                    appId: appId ? +appId : null,
+                    signal: abortControllerRef.current.signal,
+                }),
+            abortControllerRef,
+        )
+
     const [isLoadingPluginData, pluginData, pluginDataError, reloadPluginData] = useAsync(
-        () =>
-            getPluginStoreData({
-                searchKey,
-                selectedTags,
-                offset: 0,
-                appId: appId ? +appId : null,
-            }),
-        // TODO: Test if this is correct since new reference is created every time
+        getPluginStoreDataWrapper,
         persistFilters ? [pluginList] : [searchKey, appId, selectedTags],
         persistFilters ? !pluginList.length : true,
     )
@@ -135,8 +141,9 @@ const PluginListContainer = ({
     }
 
     useEffect(() => {
+        const isLoading = isLoadingPluginData || getIsRequestAborted(pluginDataError)
         // This will be reusable for load more so convert it to a function
-        if (!isLoadingPluginData && !pluginDataError && pluginData) {
+        if (!isLoading && !pluginDataError && pluginData) {
             handleDataUpdateForPluginResponse(pluginData)
         }
     }, [isLoadingPluginData, pluginData, pluginDataError])
@@ -225,7 +232,7 @@ const PluginListContainer = ({
             )}
 
             <APIResponseHandler
-                isLoading={isLoadingPluginData}
+                isLoading={isLoadingPluginData || getIsRequestAborted(pluginDataError)}
                 customLoader={<PluginCardSkeletonList count={5} />}
                 error={pluginDataError}
                 errorScreenManagerProps={{
@@ -244,6 +251,7 @@ const PluginListContainer = ({
                     isSelectable={isSelectable}
                     handleClearFilters={handleClearFilters}
                     showCardBorder={showCardBorder}
+                    getPluginStoreRef={abortControllerRef}
                 />
             </APIResponseHandler>
         </div>

src/Shared/Components/Plugin/service.tsx

@@ -1,4 +1,4 @@
-import { get, getUrlWithSearchParams, ResponseType, ROUTES, showError } from '../../../Common'
+import { get, getIsRequestAborted, getUrlWithSearchParams, ResponseType, ROUTES, showError } from '../../../Common'
 import { stringComparatorBySortOrder } from '../../Helpers'
 import {
     GetPluginListPayloadType,
@@ -44,6 +44,7 @@ export const getPluginStoreData = async ({
     selectedTags,
     appId,
     offset = 0,
+    signal,
 }: GetPluginStoreDataServiceParamsType): Promise<GetPluginStoreDataReturnType> => {
     try {
         const payload: GetPluginListPayloadType = {
@@ -53,17 +54,19 @@ export const getPluginStoreData = async ({
             size: 20,
             tag: selectedTags,
         }
-        const { result } = (await get(
-            getUrlWithSearchParams(ROUTES.PLUGIN_GLOBAL_LIST_V2, payload),
-        )) as ResponseType<PluginDetailDTO>
+        const { result } = (await get(getUrlWithSearchParams(ROUTES.PLUGIN_GLOBAL_LIST_V2, payload), {
+            signal,
+        })) as ResponseType<PluginDetailDTO>
 
         const pluginStore = parsePluginDetailsDTOIntoPluginStore(result?.parentPlugins)
         return {
             totalCount: result.totalCount,
             pluginStore,
         }
     } catch (error) {
-        showError(error)
+        if (!getIsRequestAborted(error)) {
+            showError(error)
+        }
         throw error
     }
 }

src/Shared/Components/Plugin/types.ts

@@ -1,3 +1,4 @@
+import { MutableRefObject } from 'react'
 import { VariableType } from '../../../Common'
 import { BaseFilterQueryParams } from '../../types'
 import { ImageWithFallbackProps } from '../ImageWithFallback'
@@ -143,6 +144,7 @@ export type PluginListContainerProps = BasePluginListContainerProps &
     )
 
 export interface GetPluginStoreDataServiceParamsType extends Pick<PluginListFiltersType, 'searchKey' | 'selectedTags'> {
+    signal: AbortSignal
     appId: number
     offset?: number
 }
@@ -188,6 +190,7 @@ export interface PluginListProps
     pluginList: PluginListContainerProps['parentPluginList']
     totalCount: PluginListContainerProps['parentTotalCount']
     filters: PluginListContainerProps['parentFilters']
+    getPluginStoreRef: MutableRefObject<AbortController>
 }
 
 export interface PluginCardProps