From 261cf8bfe602d2277cf3eeb294e0c0d910bd2b0b Mon Sep 17 00:00:00 2001
From: Aman Agarwal <aman@appsmith.com>
Date: Thu, 13 Feb 2025 15:28:25 +0530
Subject: [PATCH] fix: loading indicator ui for infinite loading table (#39208)

---
 app/client/src/ce/constants/messages.ts       |  2 ++
 .../component/LoadingIndicator.test.tsx       | 26 +++++++++++++++++++
 .../component/LoadingIndicator.tsx            | 22 ++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 app/client/src/widgets/TableWidgetV2/component/LoadingIndicator.test.tsx
 create mode 100644 app/client/src/widgets/TableWidgetV2/component/LoadingIndicator.tsx

diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index 0171963ba53..c6f5dbfd9af 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/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";
diff --git a/app/client/src/widgets/TableWidgetV2/component/LoadingIndicator.test.tsx b/app/client/src/widgets/TableWidgetV2/component/LoadingIndicator.test.tsx
new file mode 100644
index 00000000000..183d5dd0c9a
--- /dev/null
+++ b/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");
+  });
+});
diff --git a/app/client/src/widgets/TableWidgetV2/component/LoadingIndicator.tsx b/app/client/src/widgets/TableWidgetV2/component/LoadingIndicator.tsx
new file mode 100644
index 00000000000..8764aafe1b9
--- /dev/null
+++ b/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>
+);