From b011680db7b7067a6e320e1d2eb9c4a9f653da8b Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Fri, 12 Apr 2024 15:35:51 +0530
Subject: [PATCH] fix: Add Loading when JS is getting created (#32605)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Makes the Add button go into loading when a JS object is being created.
This is so that users can not end up in a situation where multiple JS
Objects are created in parallel

Fixes #32146

## Automation

/ok-to-test tags="@tag.IDE"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8657716256>
> Commit: c8025463ad1481e471955abb701094f01c84f17f
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8657716256&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->
---
 .../ce/pages/Editor/IDE/EditorPane/JS/hooks.ts   | 12 ++++++++++++
 .../Editor/IDE/EditorTabs/SplitScreenTabs.tsx    | 16 +++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
index fe816cf00b..ec41864db1 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
+++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
@@ -57,6 +57,18 @@ export const useJSAdd = () => {
   ]);
 };
 
+export const useIsJSAddLoading = () => {
+  const moduleCreationOptions = useModuleOptions();
+  const jsModuleCreationOptions = moduleCreationOptions.filter(
+    (opt) => opt.focusEntityType === FocusEntity.JS_MODULE_INSTANCE,
+  );
+  const { isCreating } = useSelector((state) => state.ui.jsPane);
+  if (jsModuleCreationOptions.length === 0) {
+    return isCreating;
+  }
+  return false;
+};
+
 export const useGroupedAddJsOperations = (): GroupedAddOperations => {
   return [
     {
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
index 1f09447bb6..9ca8841f3e 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { ToggleButton } from "design-system";
+import { Flex, Spinner, ToggleButton } from "design-system";
 
 import FileTabs from "./FileTabs";
 import { useSelector } from "react-redux";
@@ -16,7 +16,10 @@ import {
   EditorEntityTabState,
   EditorViewMode,
 } from "@appsmith/entities/IDE/constants";
-import { useJSAdd } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
+import {
+  useIsJSAddLoading,
+  useJSAdd,
+} from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
 import { useQueryAdd } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
 import { TabSelectors } from "./constants";
 import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
@@ -33,6 +36,7 @@ const SplitScreenTabs = () => {
   const { segment, segmentMode } = useCurrentEditorState();
 
   const onJSAddClick = useJSAdd();
+  const isJSLoading = useIsJSAddLoading();
   const onQueryAddClick = useQueryAdd();
   const onAddClick = useCallback(() => {
     if (segment === EditorEntityTab.JS) onJSAddClick();
@@ -89,7 +93,13 @@ const SplitScreenTabs = () => {
     }
     return (
       <>
-        <AddButton />
+        {isJSLoading ? (
+          <Flex px="spaces-2">
+            <Spinner size="md" />
+          </Flex>
+        ) : (
+          <AddButton />
+        )}
         <FileTabs navigateToTab={onClick} tabs={files} />
         <ListButton items={overflowList} navigateToTab={onClick} />
       </>