wasp-lang/wasp
1
1
Fork 0
mirror of https://github.com/wasp-lang/wasp.git synced 2024-12-25 10:03:07 +03:00
Code Issues Projects Releases Wiki Activity

Uses CSS module instead of Stitches for Loader component (#2178)

Browse Source
This commit is contained in:
Mihovil Ilakovac 2024-07-15 14:07:15 +02:00 committed by GitHub
parent e62f89a774
commit dddccca436
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 310 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
waspc/data/Generator/templates/react-app/src/components/Loader.module.css Normal file
View File

@ -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);
}
}

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

@ -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',
})

1
waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest generated
View File

@ -219,6 +219,7 @@ waspBuild/.wasp/build/web-app/public/favicon.ico
waspBuild/.wasp/build/web-app/public/manifest.json
waspBuild/.wasp/build/web-app/scripts/validate-env.mjs
waspBuild/.wasp/build/web-app/src/components/FullPageWrapper.tsx
waspBuild/.wasp/build/web-app/src/components/Loader.module.css
waspBuild/.wasp/build/web-app/src/components/Loader.tsx
waspBuild/.wasp/build/web-app/src/components/Message.tsx
waspBuild/.wasp/build/web-app/src/index.tsx

9
waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums generated
View File

@ -566,12 +566,19 @@
],
"7e2cd2151f3ee931711de0bd7abcbfbbee437189d0398f53f87ff3727ba3bec5"
],
[
[
"file",
"web-app/src/components/Loader.module.css"
],
"a6e938f872c66e409fe9a5e38c376354b7ace72662ebfc298b577ebc6e2b42c6"
],
[
[
"file",
"web-app/src/components/Loader.tsx"
],
"72eb2e7ef83a0b9415a14741b99f9c251c294e71bb9aa7aaea5ae9d83025fe0e"
"3edae931d96b0124496e51f85a4a8e243723c5483c4f1aeacd63caefa0960f37"
],
[
[

37
waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/components/Loader.module.css generated Normal file
View File

@ -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);
}
}

53
waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/components/Loader.tsx generated
View File

@ -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',
})

1
waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest generated
View File

@ -216,6 +216,7 @@ waspCompile/.wasp/out/web-app/public/favicon.ico
waspCompile/.wasp/out/web-app/public/manifest.json
waspCompile/.wasp/out/web-app/scripts/validate-env.mjs
waspCompile/.wasp/out/web-app/src/components/FullPageWrapper.tsx
waspCompile/.wasp/out/web-app/src/components/Loader.module.css
waspCompile/.wasp/out/web-app/src/components/Loader.tsx
waspCompile/.wasp/out/web-app/src/components/Message.tsx
waspCompile/.wasp/out/web-app/src/index.tsx

9
waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums generated
View File

@ -580,12 +580,19 @@
],
"7e2cd2151f3ee931711de0bd7abcbfbbee437189d0398f53f87ff3727ba3bec5"
],
[
[
"file",
"web-app/src/components/Loader.module.css"
],
"a6e938f872c66e409fe9a5e38c376354b7ace72662ebfc298b577ebc6e2b42c6"
],
[
[
"file",
"web-app/src/components/Loader.tsx"
],
"72eb2e7ef83a0b9415a14741b99f9c251c294e71bb9aa7aaea5ae9d83025fe0e"
"3edae931d96b0124496e51f85a4a8e243723c5483c4f1aeacd63caefa0960f37"
],
[
[

37
waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/components/Loader.module.css generated Normal file
View File

@ -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);
}
}

53
waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/components/Loader.tsx generated
View File

@ -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',
})

1
waspc/e2e-test/test-outputs/waspComplexTest-golden/files.manifest generated
View File

@ -486,6 +486,7 @@ waspComplexTest/.wasp/out/web-app/scripts/validate-env.mjs
waspComplexTest/.wasp/out/web-app/src/auth/pages/OAuthCallback.tsx
waspComplexTest/.wasp/out/web-app/src/auth/pages/createAuthRequiredPage.jsx
waspComplexTest/.wasp/out/web-app/src/components/FullPageWrapper.tsx
waspComplexTest/.wasp/out/web-app/src/components/Loader.module.css
waspComplexTest/.wasp/out/web-app/src/components/Loader.tsx
waspComplexTest/.wasp/out/web-app/src/components/Message.tsx
waspComplexTest/.wasp/out/web-app/src/index.tsx

9
waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums generated
View File

@ -1196,12 +1196,19 @@
],
"7e2cd2151f3ee931711de0bd7abcbfbbee437189d0398f53f87ff3727ba3bec5"
],
[
[
"file",
"web-app/src/components/Loader.module.css"
],
"a6e938f872c66e409fe9a5e38c376354b7ace72662ebfc298b577ebc6e2b42c6"
],
[
[
"file",
"web-app/src/components/Loader.tsx"
],
"72eb2e7ef83a0b9415a14741b99f9c251c294e71bb9aa7aaea5ae9d83025fe0e"
"3edae931d96b0124496e51f85a4a8e243723c5483c4f1aeacd63caefa0960f37"
],
[
[

37
waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/components/Loader.module.css generated Normal file
View File

@ -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);
}
}

53
waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/components/Loader.tsx generated
View File

@ -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',
})

1
waspc/e2e-test/test-outputs/waspJob-golden/files.manifest generated
View File

@ -251,6 +251,7 @@ waspJob/.wasp/out/web-app/public/favicon.ico
waspJob/.wasp/out/web-app/public/manifest.json
waspJob/.wasp/out/web-app/scripts/validate-env.mjs
waspJob/.wasp/out/web-app/src/components/FullPageWrapper.tsx
waspJob/.wasp/out/web-app/src/components/Loader.module.css
waspJob/.wasp/out/web-app/src/components/Loader.tsx
waspJob/.wasp/out/web-app/src/components/Message.tsx
waspJob/.wasp/out/web-app/src/index.tsx

9
waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums generated
View File

@ -650,12 +650,19 @@
],
"7e2cd2151f3ee931711de0bd7abcbfbbee437189d0398f53f87ff3727ba3bec5"
],
[
[
"file",
"web-app/src/components/Loader.module.css"
],
"a6e938f872c66e409fe9a5e38c376354b7ace72662ebfc298b577ebc6e2b42c6"
],
[
[
"file",
"web-app/src/components/Loader.tsx"
],
"72eb2e7ef83a0b9415a14741b99f9c251c294e71bb9aa7aaea5ae9d83025fe0e"
"3edae931d96b0124496e51f85a4a8e243723c5483c4f1aeacd63caefa0960f37"
],
[
[

37
waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/components/Loader.module.css generated Normal file
View File

@ -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);
}
}

53
waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/components/Loader.tsx generated
View File

@ -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',
})

1
waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest generated
View File

@ -220,6 +220,7 @@ waspMigrate/.wasp/out/web-app/public/favicon.ico
waspMigrate/.wasp/out/web-app/public/manifest.json
waspMigrate/.wasp/out/web-app/scripts/validate-env.mjs
waspMigrate/.wasp/out/web-app/src/components/FullPageWrapper.tsx
waspMigrate/.wasp/out/web-app/src/components/Loader.module.css
waspMigrate/.wasp/out/web-app/src/components/Loader.tsx
waspMigrate/.wasp/out/web-app/src/components/Message.tsx
waspMigrate/.wasp/out/web-app/src/index.tsx

9
waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums generated
View File

@ -580,12 +580,19 @@
],
"7e2cd2151f3ee931711de0bd7abcbfbbee437189d0398f53f87ff3727ba3bec5"
],
[
[
"file",
"web-app/src/components/Loader.module.css"
],
"a6e938f872c66e409fe9a5e38c376354b7ace72662ebfc298b577ebc6e2b42c6"
],
[
[
"file",
"web-app/src/components/Loader.tsx"
],
"72eb2e7ef83a0b9415a14741b99f9c251c294e71bb9aa7aaea5ae9d83025fe0e"
"3edae931d96b0124496e51f85a4a8e243723c5483c4f1aeacd63caefa0960f37"
],
[
[

37
waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/components/Loader.module.css generated Normal file
View File

@ -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);
}
}

53
waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/components/Loader.tsx generated
View File

@ -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',
})

1
waspc/src/Wasp/Generator/WebAppGenerator.hs
View File

@ -197,6 +197,7 @@ genSrcDir spec =
genFileCopy [relfile|test/vitest/setup.ts|],
genFileCopy [relfile|components/Message.tsx|],
genFileCopy [relfile|components/Loader.tsx|],
genFileCopy [relfile|components/Loader.module.css|],
genFileCopy [relfile|components/FullPageWrapper.tsx|],
getIndexTs spec
]