fix(renderer): Fix loading skeletons, closes #798

packages/renderer/src/page/block/Block.js

@@ -28,11 +28,7 @@ const Block = ({ block, Blocks, context, isRoot, lowdefy }) => {
   lowdefy.updaters[block.id] = () => setUpdate(updates + 1);
   return (
     <ErrorBoundary>
-      <Suspense
-        fallback={() => (
-          <LoadingBlock block={block} highlightBorders={lowdefy.lowdefyGlobal.highlightBorders} />
-        )}
-      >
+      <Suspense fallback={<LoadingBlock block={block} lowdefy={lowdefy} />}>
         <LoadBlock meta={block.meta}>
           {(Comp) => (
             <MountEvents
@@ -41,12 +37,9 @@ const Block = ({ block, Blocks, context, isRoot, lowdefy }) => {
               eventName="onMount"
               triggerEvent={block.triggerEvent}
             >
-              {(loaded) => {
-                return !Comp || !loaded ? (
-                  <LoadingBlock
-                    block={block}
-                    highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
-                  />
+              {(loaded) =>
+                !Comp || !loaded ? (
+                  <LoadingBlock block={block} lowdefy={lowdefy} />
                 ) : (
                   <CategorySwitch
                     block={block}
@@ -57,8 +50,8 @@ const Block = ({ block, Blocks, context, isRoot, lowdefy }) => {
                     lowdefy={lowdefy}
                     updates={updates}
                   />
-                );
-              }}
+                )
+              }
             </MountEvents>
           )}
         </LoadBlock>

packages/renderer/src/page/block/Context.js

@@ -45,8 +45,8 @@ const Context = ({ block, children, contextId, lowdefy }) => {
       mounted = false;
     };
   }, [block, lowdefy, contextId]);
-  if (context.id !== contextId)
-    return <LoadingBlock block={block} highlightBorders={lowdefy.lowdefyGlobal.highlightBorders} />;
+
+  if (context.id !== contextId) return <LoadingBlock block={block} lowdefy={lowdefy} />;
 
   if (error) throw error;
 
@@ -59,7 +59,7 @@ const Context = ({ block, children, contextId, lowdefy }) => {
         context.RootBlocks.areas.root.blocks[0].triggerEvent({ name })
       }
     >
-      {() => children(context)}
+      {(loaded) => (!loaded ? <LoadingBlock block={block} lowdefy={lowdefy} /> : children(context))}
     </MountEvents>
   );
 };

packages/renderer/src/page/block/LoadingBlock.js

@@ -3,11 +3,11 @@ import { Loading, makeCssClass } from '@lowdefy/block-tools';
 import { get } from '@lowdefy/helpers';
 import { BlockLayout } from '@lowdefy/layout';
 
-const LoadingBlock = ({ block, highlightBorders }) => (
+const LoadingBlock = ({ block, lowdefy }) => (
   <BlockLayout
     id={`bl-loading-${block.blockId}`}
     blockStyle={get(block, 'eval.style') || get(block, 'meta.loading.style', { default: {} })}
-    highlightBorders={highlightBorders}
+    highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
     layout={get(block, 'eval.layout') || get(block, 'meta.loading.layout', { default: {} })}
     makeCssClass={makeCssClass}
   >

packages/renderer/src/page/block/MountEvents.js

@@ -42,7 +42,7 @@ const MountEvents = ({ asyncEventName, context, eventName, triggerEvent, childre
 
   if (loading) return <>{children(false)}</>;
 
-  return <>{children(context)}</>;
+  return <>{children(true)}</>;
 };
 
 export default MountEvents;