Spinner no longer wobbly

2 files changed, 15 insertions, 6 deletions

diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx
index 0b36fd21f..9adb565f9 100644
--- a/packages/instant/src/components/animations/full_rotation.tsx
+++ b/packages/instant/src/components/animations/full_rotation.tsx
@@ -1,5 +1,9 @@
 import { keyframes, styled } from '../../style/theme';
 
+interface FullRotationProps {
+    height: string;
+    width: string;
+}
 const rotatingKeyframes = keyframes`
 from {
   transform: rotate(0deg);
@@ -10,6 +14,11 @@ to {
 }
 `;
 
-export const FullRotation = styled.div`
+export const FullRotation =
+    styled.div <
+    FullRotationProps >
+    `
     animation: ${rotatingKeyframes} 2s linear infinite;
+    height: ${props => props.height};
+    width: ${props => props.width};
 `;
diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx
index e5d2808f3..7abf24256 100644
--- a/packages/instant/src/components/ui/spinner.tsx
+++ b/packages/instant/src/components/ui/spinner.tsx
@@ -3,15 +3,15 @@ import * as React from 'react';
 import { FullRotation } from '../animations/full_rotation';
 
 export interface SpinnerProps {
-    width: number;
-    height: number;
+    pxWidth: number;
+    pxHeight: number;
 }
 export const Spinner: React.StatelessComponent<SpinnerProps> = props => {
     return (
-        <FullRotation>
+        <FullRotation width={`${props.pxWidth}px`} height={`${props.pxHeight}px`}>
             <svg
-                width={props.width}
-                height={props.height}
+                width={props.pxWidth}
+                height={props.pxHeight}
                 viewBox="0 0 34 34"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"