Uses CSS module instead of Stitches for Loader component

Signed-off-by: Mihovil Ilakovac <[email protected]>

waspc/data/Generator/templates/react-app/src/components/Loader.module.css

@@ -0,0 +1,37 @@
+.loader {
+  color: var(--loader-color, #1a202c);
+}
+
+.loaderCircle {
+  display: inline-block;
+  border-top: 2px solid currentcolor;
+  border-right: 2px solid currentcolor;
+  border-bottom: 2px solid transparent;
+  border-left: 2px solid transparent;
+  border-radius: 99999px;
+  animation: fullRotation 0.45s linear infinite;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  --spinner-size: var(--loader-spinner-size, 2rem);
+}
+
+.loaderAccessibilityText {
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+}
+
+@keyframes fullRotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

waspc/data/Generator/templates/react-app/src/components/Loader.tsx

@@ -1,51 +1,12 @@
-import { styled, keyframes } from 'wasp/core/stitches.config'
+import styles from './Loader.module.css'
 
-const fullRotationKeyframes = keyframes({
-  '0%': { transform: 'rotate(0deg)' },
-  '100%': { transform: 'rotate(360deg)' },
-})
-
-// DefaultLoader is a React component that spans accross the whole screen and displays
-// a spinner in the very middle.
+// Spans a accross the whole screen and displays a spinner in the very middle.
 export function Loader() {
+  const loaderClassName = ['loader', styles.loader].join(' ')
   return (
-    <SpinnerWrapper className="loader">
-      <Spinner />
-      <SpinnerAccessbilityText>Loading...</SpinnerAccessbilityText>
-    </SpinnerWrapper>
+    <div className={loaderClassName}>
+      <div className={styles.loaderCircle} />
+      <div className={styles.loaderAccessibilityText}>Loading...</div>
+    </div>
   )
-}
-
-const SpinnerWrapper = styled('div', {
-  color: '$gray900',
-})
-
-// Taken from Chakra UI Spinner component
-const Spinner = styled('div', {
-  display: 'inline-block',
-  borderTop: '2px solid currentcolor',
-  borderRight: '2px solid currentcolor',
-  borderBottomStyle: 'solid',
-  borderLeftStyle: 'solid',
-  borderRadius: '99999px',
-  borderBottomWidth: '2px',
-  borderLeftWidth: '2px',
-  borderBottomColor: 'transparent',
-  borderLeftColor: 'transparent',
-  animation: `0.45s linear 0s infinite normal none running ${fullRotationKeyframes}`,
-  width: 'var(--spinner-size)',
-  height: 'var(--spinner-size)',
-  '--spinner-size': '2rem',
-})
-
-const SpinnerAccessbilityText = styled('span', {
-  border: '0px',
-  clip: 'rect(0px, 0px, 0px, 0px)',
-  width: '1px',
-  height: '1px',
-  margin: '-1px',
-  padding: '0px',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  position: 'absolute',
-})
+}