Improved Profiler suspense boundary UI

Author: Brian Vaughn

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);
 }

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>
   );

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;

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}