Improved Profiler suspense boundary UI
Brian Vaughn committed
Mar 29, 2019 at 08:53 UTC
a450a23e318c5a8fcba5a52c8fdc2e23584650b3
4 files changed
+21
-15
src/devtools/views/Profiler/Profiler.css
+11
-1
@@ -79,7 +79,7 @@
79
padding: 0.5rem;
80
}
81
82
-.Fallback {
82
+.ContentFallback {
83
width: 100%;
84
height: 100%;
85
display: flex;
@@ -89,6 +89,16 @@
89
color: var(--color-dim);
90
}
91
92
+.SnapshotSelectorFallback {
93
+ height: 100%;
94
+ padding-left: 0.5rem;
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: center;
98
+ font-size: var(--font-size-sans-large);
99
+ color: var(--color-dim);
100
+}
101
+
102
.Link {
103
color: var(--color-button);
104
}
src/devtools/views/Profiler/Profiler.js
+10
-6
@@ -102,9 +102,12 @@ function NonSuspendingProfiler({
102
);
103
}
104
105
-// TODO (profiling) Real fallback UI
106
-function ProfilerFallback() {
107
- return <div className={styles.Fallback}>Loading...</div>;
105
+function ContentFallback() {
106
+ return <div className={styles.ContentFallback}>Loading...</div>;
107
+}
108
+
109
+function SnapshotSelectorFallback() {
110
+ return <div className={styles.SnapshotSelectorFallback}>Loading...</div>;
111
}
112
113
// 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() {
165
/>
166
<div className={styles.Spacer} />
167
<ToggleCommitFilterModalButton />
165
- <Suspense fallback={<ProfilerFallback />}>
168
+ <div className={styles.VRule} />
169
+ <Suspense fallback={<SnapshotSelectorFallback />}>
170
<SnapshotSelector />
171
</Suspense>
172
</div>
173
<div className={styles.Content}>
170
- <Suspense fallback={<ProfilerFallback />}>{view}</Suspense>
174
+ <Suspense fallback={<ContentFallback />}>{view}</Suspense>
175
{isFilterModalShowing && (
176
<FilterModal dismissModal={dismissFilterModal} />
177
)}
178
</div>
179
</div>
180
<div className={styles.RightColumn}>
177
- <Suspense fallback={<ProfilerFallback />}>{sidebar}</Suspense>
181
+ <Suspense fallback={<ContentFallback />}>{sidebar}</Suspense>
182
</div>
183
</div>
184
);
src/devtools/views/Profiler/SnapshotSelector.css
-7
@@ -13,13 +13,6 @@
13
outline: none;
14
}
15
16
-.VRule {
17
- height: 20px;
18
- width: 1px;
19
- background-color: var(--color-border);
20
- margin: 0 0.25rem;
21
-}
22
-
16
.IndexLabel {
17
flex: 0 0 auto;
18
white-space: nowrap;
src/devtools/views/Profiler/SnapshotSelector.js
-1
@@ -118,7 +118,6 @@ export default function SnapshotSelector(_: Props) {
118
119
return (
120
<Fragment>
121
- <div className={styles.VRule} />
121
<span className={styles.IndexLabel}>{label}</span>
122
<Button
123
className={styles.Button}