Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Add Loading when JS is getting created (#32605)

Browse Source 
## 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"

### 🔍 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  -->
This commit is contained in:
Hetu Nandu 2024-04-12 15:35:51 +05:30 committed by GitHub
parent 768811621a
commit b011680db7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
View File

@ -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 [
{

16
app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
View File

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