mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-02-17 14:30:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(renderer): Loading must render inside BlockLayout.

Browse Source
This commit is contained in:
Gervwyk 2021-02-09 18:30:40 +02:00
parent 6bcd258526
commit e1bced9843
4 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/renderer/src/page/block/Block.js
View File

@ -16,30 +16,32 @@
import React, { Suspense } from 'react';
import { ErrorBoundary, Loading } from '@lowdefy/block-tools';
import { get } from '@lowdefy/helpers';
import { ErrorBoundary } from '@lowdefy/block-tools';
import LoadBlock from './LoadBlock';
import LoadingBlock from './LoadingBlock';
import CategorySwitch from './CategorySwitch';
import WatchCache from './WatchCache';
const Block = ({ block, Blocks, context, pageId, rootContext }) => {
const Loading = (
<LoadingBlock
blockId={block.blockId}
meta={block.meta}
highlightBorders={rootContext.lowdefyGlobal.highlightBorders}
/>
);
return (
<ErrorBoundary>
<Suspense
fallback={
<Loading
properties={get(block, 'meta.loading.properties')}
type={get(block, 'meta.loading.type')}
/>
}
>
<Suspense fallback={Loading}>
<LoadBlock
meta={block.meta}
Loading={Loading}
render={(Comp) => (
<WatchCache
block={block}
rootContext={rootContext}
Loading={Loading}
render={() => (
<CategorySwitch
Component={Comp}

11
packages/renderer/src/page/block/LoadBlock.js
View File

@ -15,24 +15,21 @@
*/
import React, { lazy } from 'react';
import { Loading, loadWebpackFederatedModule, useDynamicScript } from '@lowdefy/block-tools';
import { get } from '@lowdefy/helpers';
import { loadWebpackFederatedModule, useDynamicScript } from '@lowdefy/block-tools';
const Components = {};
const LoadBlock = ({ meta, render }) => {
const LoadBlock = ({ meta, render, Loading }) => {
const typeId = `${meta.moduleFederation.scope}:${meta.moduleFederation.module}`;
const { ready, failed } = useDynamicScript({
src: meta.moduleFederation.remoteEntryUrl,
});
if (!Components[typeId]) {
if (!ready) {
return (
<Loading properties={get(meta, 'loading.properties')} type={get(meta, 'loading.type')} />
);
return Loading;
}
if (failed) {
// TODO
// TODO retry
return <h2>Failed to load dynamic script: {meta.moduleFederation.remoteEntryUrl}</h2>;
}
Components[typeId] = lazy(

20
packages/renderer/src/page/block/LoadingBlock.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import { Loading } from '@lowdefy/block-tools';
import { get } from '@lowdefy/helpers';
import { BlockLayout } from '@lowdefy/layout';
import { makeCssClass } from '@lowdefy/block-tools';
const LoadingBlock = ({ blockId, meta, highlightBorders }) => (
<BlockLayout
id={`bl-loading-${blockId}`}
blockStyle={get(meta, 'loading.style', { default: {} })}
highlightBorders={highlightBorders}
layout={get(meta, 'loading.layout', { default: {} })}
makeCssClass={makeCssClass}
>
<Loading properties={get(meta, 'loading.properties')} type={get(meta, 'loading.type')} />
</BlockLayout>
);
export default LoadingBlock;

12
packages/renderer/src/page/block/WatchCache.js
View File

@ -15,9 +15,7 @@
*/
import React from 'react';
import { get } from '@lowdefy/helpers';
import { useQuery, gql } from '@apollo/client';
import { Loading } from '@lowdefy/block-tools';
const getBlock = gql`
query getBlock($id: String!) {
@ -28,7 +26,7 @@ const getBlock = gql`
}
`;
const WatchCache = ({ block, render, rootContext }) => {
const WatchCache = ({ block, render, rootContext, Loading }) => {
const { loading, error } = useQuery(getBlock, {
variables: {
id: `BlockClass:${block.id}`,
@ -36,13 +34,7 @@ const WatchCache = ({ block, render, rootContext }) => {
client: rootContext.client,
});
if (loading)
return (
<Loading
properties={get(block, 'meta.loading.properties')}
type={get(block, 'meta.loading.type')}
/>
);
if (loading) return Loading;
if (error) throw error;
return render();