Suspense fixture placeholder styling improvement (#13314)
Vertically and horizontally center 'large' placeholder spinner in suspense demo as per @gaearon's tweet: https://twitter.com/dan_abramov/status/1025190261784289280
Alex Jegtnes committed
Aug 3, 2018 at 05:08 UTC
f265d545a14df19ac3654c3e8a4a5298708b504e
2 files changed
+26
-16
fixtures/unstable-async/suspense/src/components/Spinner.css
+7
@@ -2,6 +2,13 @@
2
animation: rotate 1.3s linear infinite;
3
}
4
5
+.SpinnerContainer-large {
6
+ position: fixed;
7
+ top: 50%;
8
+ left: 50%;
9
+ transform: translate(-50%, -50%);
10
+}
11
+
12
@keyframes rotate {
13
0% { transform: rotate(0deg); }
14
100% { transform: rotate(270deg); }
fixtures/unstable-async/suspense/src/components/Spinner.js
+19
-16
@@ -26,23 +26,26 @@ export default function Spinner({size = 'small'}) {
26
const strokeWidth = STROKE_WIDTHS[size];
27
const pathRadius = `${baseSize / 2 - strokeWidth}px`;
28
const className = PATH_CLASS_NAMES[size];
29
+ const containerClassName = `SpinnerContainer SpinnerContainer-${size}`;
30
31
return (
31
- <svg
32
- className={className}
33
- width={baseSize}
34
- height={baseSize}
35
- viewBox={`0 0 ${baseSize} ${baseSize}`}>
36
- <circle
37
- className="SpinnerPath"
38
- fill="none"
39
- stroke="currentColor"
40
- strokeWidth={strokeWidth}
41
- strokeLinecap="round"
42
- cx={pathSize}
43
- cy={pathSize}
44
- r={pathRadius}
45
- />
46
- </svg>
32
+ <div class={containerClassName}>
33
+ <svg
34
+ className={className}
35
+ width={baseSize}
36
+ height={baseSize}
37
+ viewBox={`0 0 ${baseSize} ${baseSize}`}>
38
+ <circle
39
+ className="SpinnerPath"
40
+ fill="none"
41
+ stroke="currentColor"
42
+ strokeWidth={strokeWidth}
43
+ strokeLinecap="round"
44
+ cx={pathSize}
45
+ cy={pathSize}
46
+ r={pathRadius}
47
+ />
48
+ </svg>
49
+ </div>
50
);
51
}