From 2b605a5ef4d64d0d322b907b486d432544d9aec1 Mon Sep 17 00:00:00 2001
From: Michael Taranto <michaeltaranto@users.noreply.github.com>
Date: Mon, 14 Sep 2020 12:11:50 +1000
Subject: [PATCH] fix(Preview): Resolve SplashScreen rendering behind content
 (#187)

---
 src/Playroom/Preview.less | 4 ++++
 src/Playroom/Preview.tsx  | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src/Playroom/Preview.less

diff --git a/src/Playroom/Preview.less b/src/Playroom/Preview.less
new file mode 100644
index 00000000..45027b75
--- /dev/null
+++ b/src/Playroom/Preview.less
@@ -0,0 +1,4 @@
+.container {
+  position: relative;
+  z-index: -1;
+}
diff --git a/src/Playroom/Preview.tsx b/src/Playroom/Preview.tsx
index 8bed36d2..e13e43da 100644
--- a/src/Playroom/Preview.tsx
+++ b/src/Playroom/Preview.tsx
@@ -5,6 +5,9 @@ import { useParams } from '../utils/params';
 import { compileJsx } from '../utils/compileJsx';
 import SplashScreen from './SplashScreen/SplashScreen';
 
+// @ts-ignore
+import styles from './Preview.less';
+
 // @ts-ignore
 import CatchErrors from './CatchErrors/CatchErrors';
 // @ts-ignore
@@ -47,7 +50,9 @@ export default ({ themes, components, FrameComponent }: PreviewProps) => {
         themeName={themeName || '__PLAYROOM__NO_THEME__'}
         theme={resolvedTheme}
       >
-        <RenderCode code={code} scope={components} />
+        <div className={styles.container}>
+          <RenderCode code={code} scope={components} />
+        </div>
         <SplashScreen />
       </FrameComponent>
     </CatchErrors>