Fixed up the loading state with proper positioning and adjusted colours

refs https://github.com/TryGhost/Team/issues/1692

apps/comments-ui/src/components/Loading.js

@@ -3,8 +3,8 @@ import {ReactComponent as SpinnerIcon} from '../images/icons/spinner.svg';
 
 function Loading() {
     return (
-        <div className="ghost-display flex items-center justify-center w-full h-36">
-            <SpinnerIcon className="w-12 h-12 mb-6 fill-[rgba(0,0,0,0.3)] dark:fill-[rgba(255,255,255,0.6)]" />
+        <div className="flex items-center justify-center w-full h-32">
+            <SpinnerIcon className="w-12 h-12 mb-6 fill-[rgb(225,225,225,0.9)] dark:fill-[rgba(255,255,255,0.6)]" />
         </div>
     );
 }

apps/comments-ui/src/images/icons/spinner.svg

@@ -1,9 +1,7 @@
-<div class="loader loader--style3" title="2">
-    <svg version="1.1" id="loader-1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
-        <path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
-            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/>
-        </path>
-    </svg>
-</div>
+<svg version="1.1" id="loader-1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+    <path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
+        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/>
+    </path>
+</svg>