refactor(ListingComponent): implement fetch call optimization using useRef for latest fetch tracking

refactor(Sectors): update sector link query parameters for consistent pagination and sorting

Author: sanjaypinna

app/[locale]/(user)/components/ListingComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useState } from 'react';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import GraphqlPagination from '@/app/[locale]/dashboard/components/GraphqlPagination/graphqlPagination';
@@ -219,12 +219,18 @@ const ListingComponent: React.FC<ListingProps> = ({
   const datasetDetails = facets?.results ?? [];
 
   useUrlParams(queryParams, setQueryParams, setVariables);
+  const latestFetchId = useRef(0);
 
   useEffect(() => {
     if (variables) {
+      const currentFetchId = ++latestFetchId.current;
+
       fetchDatasets(variables)
         .then((res) => {
-          setFacets(res);
+          // Only set if this is the latest call
+          if (currentFetchId === latestFetchId.current) {
+            setFacets(res);
+          }
         })
         .catch((err) => {
           console.error(err);

app/[locale]/(user)/components/Sectors.tsx

@@ -63,7 +63,7 @@ const Sectors = () => {
         <div className="mt-12 grid w-full grid-cols-1 gap-6 px-4 md:grid-cols-2 md:px-12 lg:grid-cols-3 lg:px-12">
           {data?.sectors.map((sectors: any) => (
             <Link
-              href={`/sectors/${sectors.slug}?sectors=${capitalizeWords(sectors.slug)}`}
+              href={`/sectors/${sectors.slug}?size=9&page=1&sort=recent&sectors=${capitalizeWords(sectors.slug)}`}
               key={sectors.id}
             >
               <div className="flex w-full items-center gap-5 rounded-4 bg-surfaceDefault p-7 shadow-card">