coral(bug): Add missing keepPreviousData option to getPaginatedEnvironments hook

[vikramsubramanian]

What happened?

The getPaginatedEnvironments hook encapsulate a useQuery. We are currently not passing it keepPreviousData: true, which result in a flash of loading state while filtering:

What did you expect to happen?

No flash of loading state while filtering. It is resolved by passing the keepPreviousData option like so:

    {
      queryFn: () =>
        envEndpoints[type]({
          pageNo: String(currentPage),
          searchEnvParam: search.length === 0 ? undefined : search,
        }),
      keepPreviousData: true,
    }

[mayil-ai[bot]]

To address the issue of the getPaginatedEnvironments hook causing a flash of loading state while filtering, follow these steps:

1. Locate the getPaginatedEnvironments hook in the codebase.
2. Modify the useQuery call within the hook to include the keepPreviousData: true option.

File: coral/src/app/features/requests/connectors/ConnectorRequests.tsx

const { data, isLoading, isError, error, isFetching } = useQuery({
    queryKey: [
      "connectorRequests",
      currentPage,
      search,
      environment,
      showOnlyMyRequests,
      status,
      requestType,
    ],
    queryFn: () =>
      getConnectorRequests({
        pageNo: String(currentPage),
        isMyRequest: showOnlyMyRequests,
        env: environment,
        search,
        requestStatus: status,
        operationType: requestType !== "ALL" ? requestType : undefined,
      }),
    keepPreviousData: true, // Added to prevent flash of loading state
  });

File: coral/src/app/features/topics/acl-request/queries/useExtendedEnvironments.tsx

const useExtendedEnvironments = () => {
  const {
    data: extendedEnvironments = [],
    isFetched: hasFetchedExtendedEnvironments,
  } = useQuery<ExtendedEnvironment[], Error>(["topic-environments"], {
    queryFn: async () => {
      const environments = await getAllEnvironmentsForTopicAndAcl();

      const extensionRequests = environments.map(async (environment) => {
        const [topicNames, clusterInfo] = await getExtensionData({
          envId: environment.id,
          envType: environment.type,
        });
        return {
          ...environment,
          topicNames,
          isAivenCluster: clusterInfo.aivenCluster,
        };
      });

      return Promise.all(extensionRequests);
    },
    staleTime: Infinity,
    keepPreviousData: true, // Added to prevent flash of loading state
  });

  return {
    extendedEnvironments,
    hasFetchedExtendedEnvironments,
  };
};

Here are some code snippets that may help you get started:

• coral/src/app/features/requests/connectors/ConnectorRequests.tsx:67-166 | Ensure keepPreviousData: true is added to useQuery to prevent flash of loading state while filtering.

• coral/src/app/features/topics/acl-request/queries/useExtendedEnvironments.tsx:1-66 | Ensure keepPreviousData: true is added to useQuery to prevent flash of loading state while filtering.

💡 To rerun Mayil, comment mayil-ai rerun. Mayil will incorporate any new context added to the ticket. Include details in your rerun comment to guide Mayil!