added loader to dark mode
This commit is contained in:
parent
6977b74f35
commit
5ff7377797
3 changed files with 12 additions and 6 deletions
|
@ -1,3 +1,7 @@
|
|||
export default function Loader(){
|
||||
return <div className="loader"><span className="loader-inner"></span></div>
|
||||
}
|
||||
export default function Loader() {
|
||||
return (
|
||||
<div className="loader border-black dark:border-white">
|
||||
<span className="loader-inner bg-black dark:bg-white"></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -2,6 +2,8 @@ import Link from "next/link";
|
|||
import { useRouter } from "next/router";
|
||||
import Slots from "./Slots";
|
||||
import { ExclamationIcon } from "@heroicons/react/solid";
|
||||
import React from "react";
|
||||
import Loader from "@components/Loader";
|
||||
|
||||
const AvailableTimes = ({
|
||||
date,
|
||||
|
@ -49,7 +51,7 @@ const AvailableTimes = ({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{!isFullyBooked && slots.length === 0 && !hasErrors && <div className="loader" />}
|
||||
{!isFullyBooked && slots.length === 0 && !hasErrors && <Loader />}
|
||||
|
||||
{hasErrors && (
|
||||
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
|
||||
|
|
|
@ -144,7 +144,8 @@
|
|||
height: 30px;
|
||||
margin: 60px auto;
|
||||
position: relative;
|
||||
border: 4px solid #000;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
animation: loader 2s infinite ease;
|
||||
}
|
||||
|
||||
|
@ -152,7 +153,6 @@
|
|||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
animation: loader-inner 2s infinite ease-in;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue