Skip to content

Commit 52084cc

Browse files
Timothy-RhodesTimothy-Rhodes
authored
62 fade form spinner (#65)
* Add loader for form submission * change isLoading to isSubmitting * fade in / out form, loader and success message * remove unused variables * add display:none to FadeOut component
1 parent d37c53d commit 52084cc

File tree

5 files changed

+94
-52
lines changed

5 files changed

+94
-52
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,5 @@
1414
npm-debug.log*
1515
yarn-debug.log*
1616
yarn-error.log*
17-
.screenshots/*.png
17+
.screenshots/*.png
18+
.screenshots/*.mov

‎components/fade/index.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import styled from 'styled-components'
2+
3+
const FadeOut = styled.div`
4+
display: inline-block;
5+
animation: ${(props) => (props.show ? 'none' : 'fadeOut 0.5s linear')};
6+
opacity: ${(props) => (props.show ? 1 : 0)};
7+
@keyframes fadeOut {
8+
0% {
9+
opacity: 1;
10+
}
11+
100% {
12+
opacity: 0;
13+
display: none;
14+
}
15+
}
16+
`
17+
18+
const FadeIn = styled.div`
19+
animation: fadeIn 0.5s linear;
20+
opacity: ${(props) => (props.show ? 1 : 0)};
21+
display: ${(props) => (props.show ? 'inline-block' : 'none')};
22+
23+
@keyframes fadeIn {
24+
0% {
25+
opacity: 0;
26+
}
27+
100% {
28+
opacity: 1;
29+
}
30+
}
31+
`
32+
33+
export { FadeIn, FadeOut }

‎components/form/index.js‎

Lines changed: 57 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { rem } from 'polished'
33
import { useEffect, useState } from 'react'
44
import styled from 'styled-components'
55
import Button from '../button'
6+
import { FadeIn, FadeOut } from '../fade'
67
import Input from '../input'
78
import { Loader, LoaderContainer } from '../loader'
89
import Text from '../text'
@@ -22,7 +23,7 @@ const SuccessHeader = styled.h2`
2223
`
2324

2425
const Form = () => {
25-
const [isFormSubmitted, setIsFormSubmitted] = useState(false)
26+
const [isSubmitted, setIsSubmitted] = useState(true)
2627
const [isSubmitting, setIsSubmitting] = useState(false)
2728
const [hasErrors, setHasErrors] = useState(false)
2829
const [state, setState] = useState({
@@ -49,7 +50,7 @@ const Form = () => {
4950
body: JSON.stringify(state),
5051
})
5152
if (res.status === 200) {
52-
setIsFormSubmitted(true)
53+
setIsSubmitted(true)
5354
} else {
5455
setHasErrors(true)
5556
}
@@ -61,16 +62,16 @@ const Form = () => {
6162
}
6263

6364
useEffect(() => {
64-
setIsFormSubmitted(localStorage.getItem('formSubmitted'))
65+
setIsSubmitted(localStorage.getItem('formSubmitted') === 'true')
6566
}, [])
6667

6768
useEffect(() => {
68-
localStorage.setItem('formSubmitted', isFormSubmitted)
69-
}, [isFormSubmitted])
69+
localStorage.setItem('formSubmitted', isSubmitted)
70+
}, [isSubmitted])
7071

71-
const renderForm = () =>
72-
isFormSubmitted === true ? (
73-
<div>
72+
const renderForm = () => (
73+
<div>
74+
<FadeIn show={isSubmitted}>
7475
<CheckCircle
7576
{...{
7677
color: '#FF68BA',
@@ -87,56 +88,61 @@ const Form = () => {
8788
In the meantime take a look at some{' '}
8889
<a href="https://blog.commit.dev/">blog posts</a> from our engineers.
8990
</Text>
90-
</div>
91-
) : (
91+
</FadeIn>
9292
<>
93-
{hasErrors && (
93+
<FadeIn show={hasErrors}>
9494
<Text errorText>
9595
Woops, the application failed to send. Please try again.
9696
</Text>
97-
)}
97+
</FadeIn>
98+
9899
<LoaderContainer>
99-
{isSubmitting && <Loader />}
100-
<form>
101-
<Input
102-
{...{
103-
name: 'name',
104-
onChange,
105-
placeholder: 'Name',
106-
value: state.name,
107-
}}
108-
/>
109-
<Input
110-
{...{
111-
name: 'email',
112-
onChange,
113-
placeholder: 'E-mail',
114-
type: 'email',
115-
value: state.email,
116-
}}
117-
/>
118-
<TextArea
119-
{...{
120-
name: 'info',
121-
onChange,
122-
placeholder:
123-
'Let us know where to learn more about you\n(Ex. Website, blog, youtube, etc)',
124-
value: state.info,
125-
}}
126-
/>
127-
<Button
128-
{...{
129-
'data-test-id': 'button',
130-
disabled: isSubmitting,
131-
onClick,
132-
}}
133-
>
134-
Apply To Join
135-
</Button>
136-
</form>
100+
<Loader show={isSubmitting} />
101+
{!isSubmitted && (
102+
<FadeOut show={!isSubmitting}>
103+
<form>
104+
<Input
105+
{...{
106+
name: 'name',
107+
onChange,
108+
placeholder: 'Name',
109+
value: state.name,
110+
}}
111+
/>
112+
<Input
113+
{...{
114+
name: 'email',
115+
onChange,
116+
placeholder: 'E-mail',
117+
type: 'email',
118+
value: state.email,
119+
}}
120+
/>
121+
<TextArea
122+
{...{
123+
name: 'info',
124+
onChange,
125+
placeholder:
126+
'Let us know where to learn more about you\n(Ex. Website, blog, youtube, etc)',
127+
value: state.info,
128+
}}
129+
/>
130+
<Button
131+
{...{
132+
'data-test-id': 'button',
133+
disabled: isSubmitting,
134+
onClick,
135+
}}
136+
>
137+
Apply To Join
138+
</Button>
139+
</form>
140+
</FadeOut>
141+
)}
137142
</LoaderContainer>
138143
</>
139-
)
144+
</div>
145+
)
140146

141147
return renderForm()
142148
}

‎components/loader/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ const LoaderContainer = styled.div`
99
`
1010

1111
const StyledLoader = styled.div`
12+
opacity: ${(props) => (props.show ? 1 : 0)};
13+
transition: opacity 0.5s linear;
1214
animation: rotate 1s infinite;
1315
position: fixed;
1416
margin-top: -75px;

‎screenshots‎

15.5 MB
Binary file not shown.

0 commit comments

Comments
 (0)