fix(showOpenInCodeSandbox): pass prop to loading component (#486)

codesandbox · Jun 1, 2022 · ba81506 · ba81506
1 parent 1478879
commit ba81506
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/sandpack-react/src/common/Loading.tsx b/sandpack-react/src/common/Loading.tsx
@@ -77,8 +77,11 @@ const sidesClassNames = css({
 
 export const Loading = ({
   className,
+  showOpenInCodeSandbox,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
+}: React.HTMLAttributes<HTMLDivElement> & {
+  showOpenInCodeSandbox: boolean;
+}): JSX.Element => {
   const c = useClasser(THEME_PREFIX);
 
   return (
@@ -87,7 +90,7 @@ export const Loading = ({
       title="Open in CodeSandbox"
       {...props}
     >
-      <OpenInCodeSandboxButton />
+      {showOpenInCodeSandbox && <OpenInCodeSandboxButton />}
       <div className={classNames(c("cube"), cubeClassName)}>
         <div className={classNames(c("sides"), sidesClassNames)}>
           <div className="top" />

diff --git a/sandpack-react/src/common/LoadingOverlay.tsx b/sandpack-react/src/common/LoadingOverlay.tsx
@@ -26,6 +26,8 @@ export interface LoadingOverlayProps {
    * which is helpful for external loading states.
    */
   loading?: boolean;
+
+  showOpenInCodeSandbox: boolean;
 }
 
 const loadingClassName = css({
@@ -40,6 +42,7 @@ export const LoadingOverlay = ({
   loading,
   className,
   style,
+  showOpenInCodeSandbox,
   ...props
 }: LoadingOverlayProps &
   React.HTMLAttributes<HTMLDivElement>): JSX.Element | null => {
@@ -103,7 +106,7 @@ export const LoadingOverlay = ({
       }}
       {...props}
     >
-      <Loading />
+      <Loading showOpenInCodeSandbox={showOpenInCodeSandbox} />
     </div>
   );
 };
diff --git a/sandpack-react/src/components/Preview/index.tsx b/sandpack-react/src/components/Preview/index.tsx
@@ -167,9 +167,9 @@ export const SandpackPreview = React.forwardRef<
         }}
         {...props}
       >
-        {showNavigator ? (
+        {showNavigator && (
           <Navigator clientId={clientId.current} onURLChange={handleNewURL} />
-        ) : null}
+        )}
 
         <div className={classNames(c("preview-container"), previewClassName)}>
           <iframe
@@ -183,7 +183,7 @@ export const SandpackPreview = React.forwardRef<
             title="Sandpack Preview"
           />
 
-          {showSandpackErrorOverlay ? <ErrorOverlay /> : null}
+          {showSandpackErrorOverlay && <ErrorOverlay />}
 
           <div
             className={classNames(
@@ -192,14 +192,17 @@ export const SandpackPreview = React.forwardRef<
             )}
           >
             {actionsChildren}
-            {!showNavigator && showRefreshButton && status === "running" ? (
+            {!showNavigator && showRefreshButton && status === "running" && (
               <RefreshButton clientId={clientId.current} />
-            ) : null}
+            )}
 
-            {showOpenInCodeSandbox ? <OpenInCodeSandboxButton /> : null}
+            {showOpenInCodeSandbox && <OpenInCodeSandboxButton />}
           </div>
 
-          <LoadingOverlay clientId={clientId.current} />
+          <LoadingOverlay
+            clientId={clientId.current}
+            showOpenInCodeSandbox={showOpenInCodeSandbox}
+          />
 
           {children}
         </div>

diff --git a/sandpack-react/src/components/TranspiledCode/index.tsx b/sandpack-react/src/components/TranspiledCode/index.tsx
@@ -65,7 +65,7 @@ export const SandpackTranspiledCode = ({
         title="transpiled sandpack code"
       />
       <ErrorOverlay />
-      <LoadingOverlay clientId="hidden" />
+      <LoadingOverlay clientId="hidden" showOpenInCodeSandbox={false} />
     </div>
   );
 };