From 33400f1c5a8b3352c9d940446c3d99730794a4d3 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Tue, 10 Jan 2023 19:15:56 +0800
Subject: [PATCH] feat: modify loading style

---
 packages/app/src/components/loading/styled.ts | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/loading/styled.ts b/packages/app/src/components/loading/styled.ts
index b98a8bfaa5..31906e1b7b 100644
--- a/packages/app/src/components/loading/styled.ts
+++ b/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 }>(
-  ({ size = 40 }) => {
-    return {
-      width: size * 4,
-      height: size * 4,
-      position: 'relative',
-    };
-  }
-);
+export const StyledLoadingWrapper = styled('div', {
+  shouldForwardProp: prop => {
+    return !['size'].includes(prop);
+  },
+})<{ size?: number }>(({ size = 40 }) => {
+  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));