mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Add loading spinner to book button

Browse source
This commit is contained in:
Bailey Pumfleet 2021-05-27 21:34:02 +01:00
parent 01d150092f
commit 6023a8a314
2 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
components/ui/Button.tsx Normal file
View file

@ -0,0 +1,17 @@
import { useState } from 'react';
export default function Button(props) {
const [loading, setLoading] = useState(false);
return(
<button type="submit" className="btn btn-primary" onClick={setLoading}>
{!loading && props.children}
{loading &&
<svg className="animate-spin mx-4 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
}
</button>
);
}

3
pages/[user]/book.tsx
View file

@ -12,6 +12,7 @@ import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';
import { LocationType } from '../../lib/location';
import Avatar from '../../components/Avatar';
import Button from '../../components/ui/Button';
dayjs.extend(utc);
dayjs.extend(timezone);
@ -144,7 +145,7 @@ export default function Book(props) {
<textarea name="notes" id="notes" rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting."></textarea>
</div>
<div>
<button type="submit" className="btn btn-primary">Confirm</button>
<Button type="submit" className="btn btn-primary">Confirm</Button>
<Link href={"/" + props.user.username + "/" + props.eventType.slug}>
<a className="ml-2 btn btn-white">Cancel</a>
</Link>