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} />
       </>