Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6ebb066

Browse files
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-
exportdefaultfunctionAppEditor() {
46+
constAppEditor=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)

AltStyle によって変換されたページ (->オリジナル) /