From c71e948e76c743dbc78214801894c958b393539d Mon Sep 17 00:00:00 2001
From: Dylan Carver <dylc2770@gmail.com>
Date: Tue, 1 Dec 2020 15:47:08 +0100
Subject: [PATCH] fix: prevent placeholder in runtime for media and tab

---
 src/components/media.js | 17 ++++++++++-------
 src/components/tab.js   | 15 +++++++++------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/media.js b/src/components/media.js
index 9f80393db..9c4305695 100644
--- a/src/components/media.js
+++ b/src/components/media.js
@@ -71,14 +71,17 @@
       }
     };
 
-    let MediaComponent = () => (
-      <div className={[(isEmpty || variableDev) && classes.empty]}>
-        <div className={classes.placeholderWrapper}>
-          <Placeholder />
-          {variable && <span>{imgUrl}</span>}
+    let MediaComponent = () => {
+      if (!isDev) return null;
+      return (
+        <div className={[(isEmpty || variableDev) && classes.empty]}>
+          <div className={classes.placeholderWrapper}>
+            <Placeholder />
+            {variable && <span>{imgUrl}</span>}
+          </div>
         </div>
-      </div>
-    );
+      );
+    };
 
     if (isImage && !variableDev) {
       MediaComponent = () => (
diff --git a/src/components/tab.js b/src/components/tab.js
index ef09bf060..85622e5bd 100644
--- a/src/components/tab.js
+++ b/src/components/tab.js
@@ -24,11 +24,14 @@
 
     B.defineFunction('Select', doSetTab);
 
-    const emptyBox = (
-      <Box className={classes.empty} p={3}>
-        Tab
-      </Box>
-    );
+    const EmptyBox = () => {
+      if (!isDev) return null;
+      return (
+        <Box className={classes.empty} p={3}>
+          Tab
+        </Box>
+      );
+    };
 
     const TabPanel = (isActive || !isDev) && (
       <Typography
@@ -37,7 +40,7 @@
         hidden={!isActive}
         aria-labelledby="tabs"
       >
-        {children.length === 0 ? emptyBox : children}
+        {children.length === 0 ? <EmptyBox /> : children}
       </Typography>
     );