fix: Add Loading when JS is getting created

appsmithorg · Apr 11, 2024 · fedc33d · fedc33d
1 parent b220151
commit fedc33d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 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
@@ -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
@@ -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";
@@ -12,7 +12,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";
@@ -27,6 +30,7 @@ const SplitScreenTabs = () => {
   const { segment, segmentMode } = useCurrentEditorState();
 
   const onJSAddClick = useJSAdd();
+  const isJSLoading = useIsJSAddLoading();
   const onQueryAddClick = useQueryAdd();
   const onAddClick = useCallback(() => {
     if (segment === EditorEntityTab.JS) onJSAddClick();
@@ -58,14 +62,20 @@ const SplitScreenTabs = () => {
     <>
       {files.length > 0 ? (
         <Container>
-          <ToggleButton
-            data-testid="t--ide-split-screen-add-button"
-            icon="add-line"
-            id="tabs-add-toggle"
-            isSelected={segmentMode === EditorEntityTabState.Add}
-            onClick={onAddClick}
-            size="md"
-          />
+          {isJSLoading ? (
+            <Flex px="spaces-2">
+              <Spinner size="md" />
+            </Flex>
+          ) : (
+            <ToggleButton
+              data-testid="t--ide-split-screen-add-button"
+              icon="add-line"
+              id="tabs-add-toggle"
+              isSelected={segmentMode === EditorEntityTabState.Add}
+              onClick={onAddClick}
+              size="md"
+            />
+          )}
           <FileTabs navigateToTab={onClick} tabs={files} />
           <ListButton items={overflowList} navigateToTab={onClick} />
         </Container>