From a450a23e318c5a8fcba5a52c8fdc2e23584650b3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 29 Mar 2019 08:53:39 -0700
Subject: [PATCH] Improved Profiler suspense boundary UI

---
 src/devtools/views/Profiler/Profiler.css         | 12 +++++++++++-
 src/devtools/views/Profiler/Profiler.js          | 16 ++++++++++------
 src/devtools/views/Profiler/SnapshotSelector.css |  7 -------
 src/devtools/views/Profiler/SnapshotSelector.js  |  1 -
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index ce55714c18..f3718e2e60 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/src/devtools/views/Profiler/Profiler.css
@@ -79,7 +79,7 @@
   padding: 0.5rem;
 }
 
-.Fallback {
+.ContentFallback {
   width: 100%;
   height: 100%;
   display: flex;
@@ -89,6 +89,16 @@
   color: var(--color-dim);
 }
 
+.SnapshotSelectorFallback {
+  height: 100%;
+  padding-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sans-large);
+  color: var(--color-dim);
+}
+
 .Link {
   color: var(--color-button);
 }
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 8f0276e76c..224accdcb6 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -102,9 +102,12 @@ function NonSuspendingProfiler({
   );
 }
 
-// TODO (profiling) Real fallback UI
-function ProfilerFallback() {
-  return <div className={styles.Fallback}>Loading...</div>;
+function ContentFallback() {
+  return <div className={styles.ContentFallback}>Loading...</div>;
+}
+
+function SnapshotSelectorFallback() {
+  return <div className={styles.SnapshotSelectorFallback}>Loading...</div>;
 }
 
 // This view is rendered when there is profiler data (even though there may not be any for the currently selected root).
@@ -162,19 +165,20 @@ function SuspendingProfiler() {
           />
           <div className={styles.Spacer} />
           <ToggleCommitFilterModalButton />
-          <Suspense fallback={<ProfilerFallback />}>
+          <div className={styles.VRule} />
+          <Suspense fallback={<SnapshotSelectorFallback />}>
             <SnapshotSelector />
           </Suspense>
         </div>
         <div className={styles.Content}>
-          <Suspense fallback={<ProfilerFallback />}>{view}</Suspense>
+          <Suspense fallback={<ContentFallback />}>{view}</Suspense>
           {isFilterModalShowing && (
             <FilterModal dismissModal={dismissFilterModal} />
           )}
         </div>
       </div>
       <div className={styles.RightColumn}>
-        <Suspense fallback={<ProfilerFallback />}>{sidebar}</Suspense>
+        <Suspense fallback={<ContentFallback />}>{sidebar}</Suspense>
       </div>
     </div>
   );
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index a68e564207..4a19d964bf 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -13,13 +13,6 @@
   outline: none;
 }
 
-.VRule {
-  height: 20px;
-  width: 1px;
-  background-color: var(--color-border);
-  margin: 0 0.25rem;
-}
-
 .IndexLabel {
   flex: 0 0 auto;
   white-space: nowrap;
diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js
index db6b328a53..5502218ddf 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/src/devtools/views/Profiler/SnapshotSelector.js
@@ -118,7 +118,6 @@ export default function SnapshotSelector(_: Props) {
 
   return (
     <Fragment>
-      <div className={styles.VRule} />
       <span className={styles.IndexLabel}>{label}</span>
       <Button
         className={styles.Button}