added <Loader> component

components/Loader.tsx

@@ -0,0 +1,3 @@
+export default function Loader(){
+    return <div className="loader"><span className="loader-inner"></span></div>
+}

pages/availability/index.tsx

@@ -6,7 +6,8 @@ import Shell from "../../components/Shell";
 import { useRouter } from "next/router";
 import { useRef, useState } from "react";
 import { getSession, useSession } from "next-auth/client";
-import { ClockIcon, PlusIcon } from "@heroicons/react/outline";
+import { ClockIcon } from "@heroicons/react/outline";
+import Loader from '@components/Loader';
 
 export default function Availability(props) {
   const [session, loading] = useSession();
@@ -28,7 +29,7 @@ export default function Availability(props) {
   const bufferMinsRef = useRef<HTMLInputElement>();
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   function toggleAddModal() {

pages/availability/troubleshoot.tsx

@@ -6,6 +6,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { GetServerSideProps } from "next";
 import prisma from "@lib/prisma";
+import Loader from '@components/Loader';
 dayjs.extend(utc);
 
 export default function Troubleshoot({ user }) {
@@ -14,7 +15,7 @@ export default function Troubleshoot({ user }) {
   const [selectedDate, setSelectedDate] = useState(dayjs());
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   function convertMinsToHrsMins(mins) {
@@ -80,11 +81,7 @@ export default function Troubleshoot({ user }) {
                   </div>
                 </div>
               ))}
-              {availability.length === 0 && (
+              {availability.length === 0 && <Loader />}
-                <div className="loader">
-                  <span className="loader-inner"></span>
-                </div>
-              )}
               <div className="bg-black overflow-hidden rounded-sm">
                 <div className="px-4 sm:px-6 py-2 text-white">
                   Your day ends at {convertMinsToHrsMins(user.endTime)}

pages/event-types/index.tsx

@@ -20,6 +20,7 @@ import {
   PlusIcon,
   UserIcon,
 } from "@heroicons/react/solid";
+import Loader from '@components/Loader';
 
 export default function Availability({ user, types }) {
   const [session, loading] = useSession();
@@ -65,7 +66,7 @@ export default function Availability({ user, types }) {
   }
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   return (

pages/index.tsx

@@ -1,3 +1,4 @@
+import Loader from "@components/Loader";
 import { useRouter } from "next/router";
 
 function RedirectPage() {
@@ -6,6 +7,9 @@ function RedirectPage() {
     router.push("/event-types");
     return;
   }
+  return (
+    <Loader/>
+  );
 }
 
 RedirectPage.getInitialProps = (ctx) => {

pages/integrations/[integration].tsx

@@ -5,6 +5,7 @@ import Shell from "../../components/Shell";
 import { useState } from "react";
 import { useRouter } from "next/router";
 import { useSession, getSession } from "next-auth/client";
+import Loader from '@components/Loader';
 
 export default function integration(props) {
   const router = useRouter();
@@ -12,7 +13,7 @@ export default function integration(props) {
   const [showAPIKey, setShowAPIKey] = useState(false);
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   function toggleShowAPIKey() {

pages/integrations/index.tsx

@@ -13,6 +13,7 @@ import {
 } from "@heroicons/react/solid";
 import { InformationCircleIcon } from "@heroicons/react/outline";
 import { Switch } from "@headlessui/react";
+import Loader from '@components/Loader';
 
 export default function Home({ integrations }) {
   const [session, loading] = useSession();
@@ -88,9 +89,7 @@ export default function Home({ integrations }) {
 
   if (loading) {
     return (
-      <div className="loader">
+      <Loader/>
-        <span className="loader-inner"></span>
-      </div>
     );
   }
 

pages/settings/embed.tsx

@@ -6,13 +6,13 @@ import prisma from "../../lib/prisma";
 import Shell from "../../components/Shell";
 import SettingsShell from "../../components/Settings";
 import {  useSession, getSession } from "next-auth/client";
+import Loader from '@components/Loader';
 
 export default function Embed(props) {
   const [session, loading] = useSession();
-  const router = useRouter();
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   return (

pages/settings/password.tsx

@@ -5,7 +5,8 @@ import prisma from "../../lib/prisma";
 import Modal from "../../components/Modal";
 import Shell from "../../components/Shell";
 import SettingsShell from "../../components/Settings";
-import { signIn, useSession, getSession } from "next-auth/client";
+import { useSession, getSession } from "next-auth/client";
+import Loader from '@components/Loader';
 
 export default function Settings(props) {
   const [session, loading] = useSession();
@@ -14,7 +15,7 @@ export default function Settings(props) {
   const newPasswordRef = useRef<HTMLInputElement>();
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   const closeSuccessModal = () => {