feat: modify loading style

packages/app/src/components/loading/styled.ts

@@ -1,19 +1,22 @@
 import { styled } from '@/styles';
 
 // Inspired by https://codepen.io/graphilla/pen/rNvBMYY
-export const StyledLoadingWrapper = styled.div<{ size?: number }>(
+export const StyledLoadingWrapper = styled('div', {
-  ({ size = 40 }) => {
+  shouldForwardProp: prop => {
-    return {
+    return !['size'].includes(prop);
-      width: size * 4,
+  },
-      height: size * 4,
+})<{ size?: number }>(({ size = 40 }) => {
-      position: 'relative',
+  return {
-    };
+    width: size * 4,
-  }
+    height: size * 4,
-);
+    position: 'relative',
+  };
+});
 export const StyledLoading = styled.div`
   position: absolute;
   left: 25%;
-  top: 25%;
+  top: 50%;
+  transform: rotateX(55deg) rotateZ(-45deg);
   @keyframes slide {
     0% {
       transform: translate(var(--sx), var(--sy));