style: optically center card spinners

sanity-io · Jan 7, 2021 · 8a37e59 · 8a37e59
1 parent beef859
commit 8a37e59
Showing 1 changed file with 19 additions and 18 deletions.
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -147,7 +147,8 @@ const Card = (props: Props) => {
         <Box
           flex={1}
           style={{
-            cursor: 'pointer'
+            cursor: 'pointer',
+            position: 'relative'
           }}
         >
           <Image
@@ -160,6 +161,23 @@ const Card = (props: Props) => {
               transition: 'opacity 1000ms'
             }}
           />
+
+          {/* Spinner */}
+          {updating && (
+            <Flex
+              align="center"
+              justify="center"
+              style={{
+                height: '100%',
+                left: 0,
+                position: 'absolute',
+                top: 0,
+                width: '100%'
+              }}
+            >
+              <Spinner />
+            </Flex>
+          )}
         </Box>
 
         {/* Footer */}
@@ -221,23 +239,6 @@ const Card = (props: Props) => {
             </Tooltip>
           </Box>
         )}
-
-        {/* Spinner */}
-        {updating && (
-          <Flex
-            align="center"
-            justify="center"
-            style={{
-              height: '100%',
-              left: 0,
-              position: 'absolute',
-              top: 0,
-              width: '100%'
-            }}
-          >
-            <Spinner />
-          </Flex>
-        )}
       </Container>
     </>
   )