docs: Do not load stackblitz embeds for google

reactive · Sep 11, 2023 · 7a7188a · 7a7188a
1 parent 5fabf0e
commit 7a7188a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 25 deletions.
diff --git a/website/src/components/Playground/Preview.tsx b/website/src/components/Playground/Preview.tsx
@@ -92,6 +92,6 @@ function LivePreviewLoader() {
 const PreviewBlockLazy = lazy(
   () =>
     import(
-      /* webpackChunkName: '[request]', webpackPreload: true */ './PreviewBlock'
+      /* webpackChunkName: 'PreviewBlock', webpackPreload: true */ './PreviewBlock'
     ),
 );
diff --git a/website/src/components/Playground/index.tsx b/website/src/components/Playground/index.tsx
@@ -102,21 +102,7 @@ function PlaygroundContent<T>({
         handleCodeChange={handleCodeChange}
         codes={codes}
       />
-      <Boundary
-        fallback={
-          <PreviewWrapper key="preview">
-            <div className={styles.playgroundPreview}></div>
-            <div className={styles.debugToggle}>
-              Store
-              <span
-                className={clsx(styles.arrow, styles.right, styles.vertical)}
-              >
-                ▶
-              </span>
-            </div>
-          </PreviewWrapper>
-        }
-      >
+      <Boundary fallback={previewLoading}>
         <PreviewWithScopeLazy
           code={code}
           {...{
@@ -141,11 +127,23 @@ interface ContentProps<T = any> {
   getInitialInterceptorData?: () => T;
 }
 
+const previewLoading = (
+  <PreviewWrapper key="preview">
+    <div className={styles.playgroundPreview}></div>
+    <div className={styles.debugToggle}>
+      Store
+      <span className={clsx(styles.arrow, styles.right, styles.vertical)}>
+        ▶
+      </span>
+    </div>
+  </PreviewWrapper>
+);
+
 const PreviewWithScopeLazy = lazy(() =>
   isGoogleBot
-    ? Promise.resolve({ default: (props: any): JSX.Element => null })
+    ? Promise.resolve({ default: (props: any): JSX.Element => previewLoading })
     : import(
-        /* webpackChunkName: '[request]', webpackPrefetch: true */ './PreviewWithScope'
+        /* webpackChunkName: 'PreviewWithScope', webpackPrefetch: true */ './PreviewWithScope'
       ),
 );
 

diff --git a/website/src/components/Playground/monaco-init.ts b/website/src/components/Playground/monaco-init.ts
@@ -215,7 +215,7 @@ if (
       ...rhDeps.map(
         dep =>
           import(
-            /* webpackChunkName: '[request]', webpackPreload: true */ `!!raw-loader?esModule=false!./editor-types/@data-client/${dep}.d.ts`
+            /* webpackChunkName: '[request]', webpackPreload: true, webpackMode: "lazy-once" */ `!!raw-loader?esModule=false!./editor-types/@data-client/${dep}.d.ts`
           ),
       ),
     ]).then(([mPromise, ...settles]) => {

diff --git a/website/src/components/StackBlitz.tsx b/website/src/components/StackBlitz.tsx
@@ -1,6 +1,7 @@
 import Link from '@docusaurus/Link';
 import React, { useEffect } from 'react';
 
+import { isGoogleBot } from './Playground/isGoogleBot';
 import { useHasIntersected } from './useHasIntersected';
 
 export default function StackBlitz({
@@ -44,12 +45,13 @@ export default function StackBlitz({
     return () => frameRef.current?.removeEventListener('load', loadListener);
   }, [hasIntersected, frameRef]);*/
 
-  if (!hasIntersected) {
-    return <iframe width={width} height={height} ref={frameRef}></iframe>;
-  }
-
-  return (
-    <>
+  let embedElement: React.ReactElement;
+  if (!hasIntersected || isGoogleBot) {
+    embedElement = (
+      <iframe width={width} height={height} ref={frameRef}></iframe>
+    );
+  } else {
+    embedElement = (
       <iframe
         src={src}
         width={width}
@@ -58,6 +60,12 @@ export default function StackBlitz({
         loading="lazy"
         sandbox="allow-scripts allow-same-origin"
       ></iframe>
+    );
+  }
+
+  return (
+    <>
+      {embedElement}
       <p style={{ textAlign: 'center' }}>
         <Link className="button button--secondary button--sm" to="/demos">
           More Demos