fix: loading indicator ui for infinite loading table (#39208)

app/client/src/ce/constants/messages.ts

@@ -2626,3 +2626,5 @@ export const PREMIUM_DATASOURCES = {
 
 export const DATASOURCE_SECURE_TEXT = () =>
   `When connecting datasources, your passwords are AES-256 encrypted and we never store any of your data.`;
+
+export const TABLE_LOADING_RECORDS = () => "loading records";

app/client/src/widgets/TableWidgetV2/component/LoadingIndicator.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { LoadingIndicator } from "./LoadingIndicator";
+
+describe("LoadingIndicator", () => {
+  it("renders a spinner and loading text", () => {
+    render(<LoadingIndicator />);
+
+    // Check if the Flex container is rendered
+    const flexContainer = document.querySelector(".ads-v2-flex");
+
+    expect(flexContainer).toBeInTheDocument();
+
+    // Check if the spinner is rendered
+    const spinner = document.querySelector(".ads-v2-spinner");
+
+    expect(spinner).toBeInTheDocument();
+
+    // Check if the text is displayed correctly
+    const textElement = screen.getByText("loading records");
+
+    expect(textElement).toBeInTheDocument();
+    expect(textElement).toHaveClass("ads-v2-text");
+  });
+});

app/client/src/widgets/TableWidgetV2/component/LoadingIndicator.tsx

@@ -0,0 +1,22 @@
+import { Flex, Spinner, Text } from "@appsmith/ads";
+import { createMessage, TABLE_LOADING_RECORDS } from "ee/constants/messages";
+import React from "react";
+
+export const LoadingIndicator = () => (
+  <Flex
+    alignItems="center"
+    background="var(--ads-v2-color-white)"
+    borderTop="1px solid var(--wds-color-border-onaccent)"
+    bottom="0"
+    gap="spaces-3"
+    left="0"
+    padding="spaces-3"
+    position="sticky"
+    right="0"
+  >
+    <Spinner iconProps={{ color: "var(--ads-v2-color-gray-400)" }} size="md" />
+    <Text color="var(--ads-v2-color-gray-400)" kind="body-s">
+      {createMessage(TABLE_LOADING_RECORDS)}
+    </Text>
+  </Flex>
+);