In my client component, I'm fetching some data using a server action when the user clicks the filters buttons. How can I avoid the loading.tsx file that is been shown?

This is my folder structure:
app/[locale]/offer/activities
- partials/activitiesList.tsx
- loading.tsx

Attached my component ActivitiesList.tsx:

Here's my server action

export const getActivities = async ({ id, filter, sort }: Props) => {
  const headers = {
    Authorization: `Bearer ${process.env.NEXT_PUBLIC_BIZ_TOKEN}`,
  };

  const filters = [];
  filters.push(filter);

  const queryParams = new URLSearchParams();

  id && queryParams.append("corporate_id", id);
  sort && queryParams.append("sort", sort);
  filter?.length && queryParams.append("filter[category]", filters.join(","));

  const res = await fetcher(`${getActivitiesEndpoint}?${queryParams}`, {
    options: { headers },
  });

  if (!res) {
    throw new Error("Failed to fetch data");
  }

  return res;
};

`

Thanks