Skip to content

Commit 6ebb066

Browse files
raheeliftikhar5raheeliftikhar5
committed
added fallback for left-panel, right-panel and bottom-panel
1 parent 0ef3216 commit 6ebb066

File tree

5 files changed

+81
-65
lines changed

5 files changed

+81
-65
lines changed

‎client/packages/lowcoder/src/layout/gridLayout.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1097,7 +1097,6 @@ const LayoutContainer = styled.div<{
10971097
}`}
10981098
`;
10991099

1100-
// export const ReactGridLayout = React.memo(GridLayout);
11011100
export const ReactGridLayout = React.memo(GridLayout);
11021101

11031102
function moveOrResize(

‎client/packages/lowcoder/src/pages/common/header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@ export default function Header(props: HeaderProps) {
401401
size="small"
402402
>
403403
{editorModeOptions.map((option) => (
404-
<Tooltip title={option.tooltip}>
404+
<Tooltip key={option.key} title={option.tooltip}>
405405
<Radio.Button key={option.key} value={option.value}>
406406
{option.label}
407407
</Radio.Button>

‎client/packages/lowcoder/src/pages/editor/AppEditor.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {ErrorBoundary, FallbackProps} from 'react-error-boundary';
3131
import { ALL_APPLICATIONS_URL } from "@lowcoder-ee/constants/routesURL";
3232
import history from "util/history";
3333
import Flex from "antd/es/flex";
34+
import React from "react";
3435

3536
const AppSnapshot = lazy(() => {
3637
return import("pages/editor/appSnapshot")
@@ -42,7 +43,7 @@ const AppEditorInternalView = lazy(
4243
.then(moduleExports => ({default: moduleExports.AppEditorInternalView}))
4344
);
4445

45-
export default function AppEditor() {
46+
const AppEditor = React.memo(() => {
4647
const showAppSnapshot = useSelector(showAppSnapshotSelector);
4748
const params = useParams<AppPathParams>();
4849
const isUserViewModeCheck = useUserViewMode();
@@ -190,4 +191,6 @@ export default function AppEditor() {
190191
)}
191192
</ErrorBoundary>
192193
);
193-
}
194+
});
195+
196+
export default AppEditor;

‎client/packages/lowcoder/src/pages/editor/appSnapshot.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { TopHeaderHeight } from "constants/style";
3636
import { SnapshotItemProps, SnapshotList } from "../../components/SnapshotList";
3737
import { trans } from "i18n";
3838
import EditorSkeletonView from "./editorSkeletonView";
39+
import React from "react";
3940

4041
const AppEditorInternalView = lazy(
4142
() => import("pages/editor/appEditorInternal")
@@ -134,7 +135,7 @@ const PAGE_SIZE = 10;
134135
const CURRENT_ITEM_KEY = "current_key";
135136
const TIME_FORMAT = trans("history.timeFormat");
136137

137-
export function AppSnapshot(props: { currentAppInfo: AppSummaryInfo }) {
138+
export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }) => {
138139
const { currentAppInfo } = props;
139140
const currentDsl = currentAppInfo.dsl;
140141
const dispatch = useDispatch();
@@ -289,4 +290,4 @@ export function AppSnapshot(props: { currentAppInfo: AppSummaryInfo }) {
289290
</AppSnapshotPanel>
290291
</Suspense>
291292
);
292-
}
293+
});

‎client/packages/lowcoder/src/pages/editor/editorView.tsx

Lines changed: 72 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ import {
5454
import { isAggregationApp } from "util/appUtils";
5555
import EditorSkeletonView from "./editorSkeletonView";
5656
import { getCommonSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
57-
import { isEqual } from "lodash";
57+
import { isEqual, noop } from "lodash";
58+
import { BottomSkeleton } from "./bottom/BottomContent";
5859

5960
const LeftContent = lazy(
6061
() => import('./LeftContent')
@@ -374,6 +375,23 @@ function EditorView(props: EditorViewProps) {
374375

375376
const hideBodyHeader = useTemplateViewMode() || (isViewMode && (!showHeaderInPublic || !commonSettings.showHeaderInPublicApps));
376377

378+
const uiCompView = useMemo(() => {
379+
if (showAppSnapshot) {
380+
return (
381+
<ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
382+
<EditorContainer>{uiComp.getView()}</EditorContainer>
383+
</ViewBody>
384+
);
385+
}
386+
387+
return uiComp.getView();
388+
}, [
389+
showAppSnapshot,
390+
hideBodyHeader,
391+
height,
392+
uiComp,
393+
]);
394+
377395
// we check if we are on the public cloud
378396
const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud';
379397
const isLocalhost = window.location.hostname === 'localhost';
@@ -425,16 +443,6 @@ function EditorView(props: EditorViewProps) {
425443

426444
// history mode, display with the right panel, a little trick
427445
const showRight = panelStatus.right || showAppSnapshot;
428-
let uiCompView;
429-
if (showAppSnapshot) {
430-
uiCompView = (
431-
<ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
432-
<EditorContainer>{uiComp.getView()}</EditorContainer>
433-
</ViewBody>
434-
);
435-
} else {
436-
uiCompView = uiComp.getView();
437-
}
438446

439447
const clickMenu = (params: { key: string }) => {
440448
let left = true;
@@ -514,46 +522,47 @@ function EditorView(props: EditorViewProps) {
514522
)}
515523
</Sider>
516524
</SiderWrapper>
517-
518-
{panelStatus.left && editorModeStatus !== "layout" && (
519-
<LeftPanel>
520-
{menuKey === SiderKey.State && <LeftContent uiComp={uiComp} />}
521-
{menuKey === SiderKey.Setting && (
522-
<SettingsDiv>
523-
<ScrollBar>
524-
{application &&
525-
!isAggregationApp(
526-
AppUILayoutType[application.applicationType]
527-
) && (
528-
<>
529-
{appSettingsComp.getPropertyView()}
530-
<Divider />
531-
</>
532-
)}
533-
<TitleDiv>{trans("leftPanel.toolbarTitle")}</TitleDiv>
534-
{props.preloadComp.getPropertyView()}
535-
<PreloadDiv
536-
onClick={() => dispatch(
537-
setEditorExternalStateAction({
538-
showScriptsAndStyleModal: true,
539-
})
540-
)}
541-
>
542-
<LeftPreloadIcon />
543-
{trans("leftPanel.toolbarPreload")}
544-
</PreloadDiv>
545-
</ScrollBar>
546-
547-
{props.preloadComp.getJSLibraryPropertyView()}
548-
</SettingsDiv>
549-
)}
550-
551-
{menuKey === SiderKey.Layout && (
552-
<LeftLayersContent uiComp={uiComp} />
553-
)}
554-
555-
</LeftPanel>
556-
)}
525+
<Suspense fallback={null}>
526+
{panelStatus.left && editorModeStatus !== "layout" && (
527+
<LeftPanel>
528+
{menuKey === SiderKey.State && <LeftContent uiComp={uiComp} />}
529+
{menuKey === SiderKey.Setting && (
530+
<SettingsDiv>
531+
<ScrollBar>
532+
{application &&
533+
!isAggregationApp(
534+
AppUILayoutType[application.applicationType]
535+
) && (
536+
<>
537+
{appSettingsComp.getPropertyView()}
538+
<Divider />
539+
</>
540+
)}
541+
<TitleDiv>{trans("leftPanel.toolbarTitle")}</TitleDiv>
542+
{props.preloadComp.getPropertyView()}
543+
<PreloadDiv
544+
onClick={() => dispatch(
545+
setEditorExternalStateAction({
546+
showScriptsAndStyleModal: true,
547+
})
548+
)}
549+
>
550+
<LeftPreloadIcon />
551+
{trans("leftPanel.toolbarPreload")}
552+
</PreloadDiv>
553+
</ScrollBar>
554+
555+
{props.preloadComp.getJSLibraryPropertyView()}
556+
</SettingsDiv>
557+
)}
558+
559+
{menuKey === SiderKey.Layout && (
560+
<LeftLayersContent uiComp={uiComp} />
561+
)}
562+
563+
</LeftPanel>
564+
)}
565+
</Suspense>
557566
<MiddlePanel>
558567
<EditorWrapper className={editorContentClassName}>
559568
<EditorHotKeys disabled={readOnly}>
@@ -563,15 +572,19 @@ function EditorView(props: EditorViewProps) {
563572
</EditorContainerWithViewMode>
564573
</EditorHotKeys>
565574
</EditorWrapper>
566-
{panelStatus.bottom && editorModeStatus !== "layout" && <Bottom />}
575+
<Suspense fallback={<BottomSkeleton />}>
576+
{panelStatus.bottom && editorModeStatus !== "layout" && <Bottom />}
577+
</Suspense>
567578
</MiddlePanel>
568-
{showRight && (
569-
<RightPanel
570-
uiComp={uiComp}
571-
onCompDrag={onCompDrag}
572-
showPropertyPane={editorState.showPropertyPane}
573-
onTabChange={setShowPropertyPane} />
574-
)}
579+
<Suspense fallback={null}>
580+
{showRight && (
581+
<RightPanel
582+
uiComp={uiComp}
583+
onCompDrag={onCompDrag}
584+
showPropertyPane={editorState.showPropertyPane}
585+
onTabChange={setShowPropertyPane} />
586+
)}
587+
</Suspense>
575588
</Body>
576589
</EditorGlobalHotKeys>
577590
</Height100Div></>

0 commit comments

Comments
 (0)