replaces spinner with text

land-cap · Dec 29, 2023 · 2e51d48 · 2e51d48 · vercel · Dec 29, 2023
1 parent f80da19
commit 2e51d48
Showing 1 changed file with 2 additions and 47 deletions.
diff --git a/src/app/[readerMode]/[bookCode]/[chapter]/loading.tsx b/src/app/[readerMode]/[bookCode]/[chapter]/loading.tsx
@@ -1,3 +1,4 @@
+import { css } from 'styled-system/css'
 import { center } from 'styled-system/patterns'
 
 const Loading = () => (
@@ -7,53 +8,7 @@ const Loading = () => (
 			h: 'calc(100dvh - token(spacing.14) - token(spacing.14))',
 		})}
 	>
-		<style>
-			{`
-				.loader {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  display: block;
-  margin: 1rem auto;
-  position: relative;
-  color: #FFF;
-  left: -4.5rem;
-  box-sizing: border-box;
-  animation: shadowRolling 2s linear infinite;
-}
-
-@keyframes shadowRolling {
-  0% {
-    box-shadow: 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0);
-  }
-  12% {
-    box-shadow: 5rem 0 var(--colors-fg-faded), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0);
-  }
-  25% {
-    box-shadow: 6rem 0 var(--colors-fg-faded), 100px 0 var(--colors-fg-faded), 0px 0 rgba(0,0,0,0), 0px 0 rgba(0,0,0,0);
-  }
-  36% {
-    box-shadow: 7rem 0 var(--colors-fg-faded), 110px 0 var(--colors-fg-faded), 100px 0 var(--colors-fg-faded), 0px 0 rgba(0,0,0,0);
-  }
-  50% {
-    box-shadow: 8rem 0 var(--colors-fg-faded), 120px 0 var(--colors-fg-faded), 110px 0 var(--colors-fg-faded), 100px 0 var(--colors-fg-faded);
-  }
-  62% {
-    box-shadow: 9rem 0 rgba(0,0,0,0), 130px 0 var(--colors-fg-faded), 120px 0 var(--colors-fg-faded), 110px 0 var(--colors-fg-faded);
-  }
-  75% {
-    box-shadow: 9rem 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 130px 0 var(--colors-fg-faded), 120px 0 var(--colors-fg-faded);
-  }
-  87% {
-    box-shadow: 9rem 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 130px 0 var(--colors-fg-faded);
-  }
-  100% {
-    box-shadow: 9rem 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0), 200px 0 rgba(0,0,0,0);
-  }
-}
-				`}
-		</style>
-		<span className="loader"></span>
+		<p className={css({ color: 'fg.subtle' })}>Încărcare...</p>
 	</div>
 )