From d2b2cd55adacfedc420c0889c932b430d475741b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Tue, 24 Jan 2023 22:52:08 +0100
Subject: [PATCH] Dynamically load `Juniper`

---
 website/src/components/code.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/website/src/components/code.js b/website/src/components/code.js
index 82f4ce49b..9d8138794 100644
--- a/website/src/components/code.js
+++ b/website/src/components/code.js
@@ -17,10 +17,10 @@ import 'prismjs/components/prism-yaml.min.js'
 import { isString } from './util'
 import Link, { OptionalLink } from './link'
 import GitHubCode from './github'
-import Juniper from './juniper'
 import classes from '../styles/code.module.sass'
 import siteMetadata from '../../meta/site.json'
 import { binderBranch } from '../../meta/dynamicMeta.mjs'
+import dynamic from 'next/dynamic'
 
 const CLI_GROUPS = ['init', 'debug', 'project', 'ray', 'huggingface-hub']
 
@@ -274,6 +274,8 @@ export default class Code extends React.Component {
     }
 }
 
+const JuniperDynamic = dynamic(() => import('./juniper'))
+
 const JuniperWrapper = ({ title, lang, children }) => {
     const { binderUrl, binderVersion } = siteMetadata
     const juniperTitle = title || 'Editable Code'
@@ -289,7 +291,7 @@ const JuniperWrapper = ({ title, lang, children }) => {
                 </span>
             </h4>
 
-            <Juniper
+            <JuniperDynamic
                 repo={binderUrl}
                 branch={binderBranch}
                 lang={lang}
@@ -301,7 +303,7 @@ const JuniperWrapper = ({ title, lang, children }) => {
                 }}
             >
                 {children}
-            </Juniper>
+            </JuniperDynamic>
         </div>
     )
 }