Lazy import Slate

Author: andrewbranch

src/hooks/useDeferredRender.ts

@@ -1,15 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import 'requestidlecallback';
 
 export interface UseDeferredRenderOptions {
   timeout?: number;
 }
 
 export function useDeferredRender<T extends React.ReactNode>(
-  expensiveRender: () => T,
+  expensiveRender: () => T | Promise<T>,
   { timeout }: UseDeferredRenderOptions = {},
 ): T | null {
   const [initialized, setInitialized] = useState(false);
+  const [content, setContent] = useState<T | null>(null);
+  const isAsynRender = useRef(false);
   useEffect(() => {
     if (!initialized) {
       requestIdleCallback(() => {
@@ -18,5 +20,22 @@ export function useDeferredRender<T extends React.ReactNode>(
     }
   }, [initialized]);
 
-  return initialized ? expensiveRender() : null;
+  if (isAsynRender.current) {
+    isAsynRender.current = false;
+    return content;
+  }
+
+  if (initialized) {
+    const renderResult = expensiveRender();
+    if ('then' in renderResult) {
+      renderResult.then(c => {
+        isAsynRender.current = true;
+        setContent(c);
+      });
+    } else {
+      return renderResult;
+    }
+  }
+
+  return content;
 }

src/templates/CodePost.tsx

@@ -2,7 +2,6 @@ import React, { HTMLAttributes, useEffect, useContext, useState, useMemo, useRef
 import Layout from '../components/Layout';
 import { graphql } from 'gatsby';
 import RehypeReact from 'rehype-react';
-import { InteractiveCodeBlock } from '../components/InteractiveCodeBlock/InteractiveCodeBlock';
 import { CacheableLineTokens, TypeScriptTokenType } from '../components/InteractiveCodeBlock/tokenizers/types';
 import { useProgressiveTokenizer, ComposedTokenT } from '../hooks';
 import { useDeferredRender } from '../hooks/useDeferredRender';
@@ -109,57 +108,60 @@ function ProgressiveCodeBlock(props: { children: [React.ReactElement<HTMLAttribu
     fileName,
     visibleSpan: span,
   });
-  const deferredCodeBlock = useDeferredRender(() => (
-    <InteractiveCodeBlock
-      className="tm-theme"
-      initialValue={originalText}
-      tokenizer={tokenizer}
-      readOnly={!isInitialized}
-      onStartEditing={() => {
-        setShouldInitialize(true);
-        onStartEditing!(fileName);
-      }}
-      isLoading={isLoading}
-      onChange={value => {
-        const start = getStartOfCodeBlock(id, mutableCodeBlocks, sourceFiles![codeBlock.fileName]);
-        const end = start + value.length;
-        const newSpan = { start, length: value.length };
-        mutableCodeBlocks[id].end = end;
-        if (tsEnv && mutableCodeBlocks[id].text !== value) {
-          mutableCodeBlocks[id].text = value;
-          tsEnv.updateFile(fileName, value, span);
-        }
-        setSpan(newSpan);
-      }}
-      renderToken={(token, tokenProps) => {
-        switch (token.type) {
-          case 'tm':
-            return (
-              <span
-                className={token.scopes.reduce((scopes, s) => `${scopes} ${s.split('.').join(' ')}`, '')}
-                {...tokenProps}
-              />
-            );
-          case TypeScriptTokenType.Identifier:
-            return (
-              <TypeScriptIdentifierToken
-                staticQuickInfo={quickInfo}
-                languageService={tsEnv && isInitialized && tsEnv.languageService}
-                sourceFileName={fileName}
-                position={token.sourcePosition}
-                {...tokenProps}
-              />
-            );
-          case TypeScriptTokenType.Diagnostic:
-            return (
-              <TypeScriptDiagnosticToken message={token.diagnosticMessage} {...tokenProps} />
-            );
-          default:
-            return <span {...tokenProps} />;
-        }
-      }}
-    />
-  ), { timeout: 1000 });
+  const deferredCodeBlock = useDeferredRender(async () => {
+    const { InteractiveCodeBlock } = await import('../components/InteractiveCodeBlock/InteractiveCodeBlock');
+    return (
+      <InteractiveCodeBlock
+        className="tm-theme"
+        initialValue={originalText}
+        tokenizer={tokenizer}
+        readOnly={!isInitialized}
+        onStartEditing={() => {
+          setShouldInitialize(true);
+          onStartEditing!(fileName);
+        }}
+        isLoading={isLoading}
+        onChange={value => {
+          const start = getStartOfCodeBlock(id, mutableCodeBlocks, sourceFiles![codeBlock.fileName]);
+          const end = start + value.length;
+          const newSpan = { start, length: value.length };
+          mutableCodeBlocks[id].end = end;
+          if (tsEnv && mutableCodeBlocks[id].text !== value) {
+            mutableCodeBlocks[id].text = value;
+            tsEnv.updateFile(fileName, value, span);
+          }
+          setSpan(newSpan);
+        }}
+        renderToken={(token, tokenProps) => {
+          switch (token.type) {
+            case 'tm':
+              return (
+                <span
+                  className={token.scopes.reduce((scopes, s) => `${scopes} ${s.split('.').join(' ')}`, '')}
+                  {...tokenProps}
+                />
+              );
+            case TypeScriptTokenType.Identifier:
+              return (
+                <TypeScriptIdentifierToken
+                  staticQuickInfo={quickInfo}
+                  languageService={tsEnv && isInitialized && tsEnv.languageService}
+                  sourceFileName={fileName}
+                  position={token.sourcePosition}
+                  {...tokenProps}
+                />
+              );
+            case TypeScriptTokenType.Diagnostic:
+              return (
+                <TypeScriptDiagnosticToken message={token.diagnosticMessage} {...tokenProps} />
+              );
+            default:
+              return <span {...tokenProps} />;
+          }
+        }}
+      />
+    );
+  }, { timeout: 1000 });
 
   return (
     <ErrorCatcher renderFallback={() => <CheapCodeBlock>{text}</CheapCodeBlock>}>