[offers][fix] Add loading spinner

pull/430/head
Ai Ling 3 years ago
parent 1d4dd63938
commit 6ec227f1a7

@ -2,7 +2,7 @@ import { useRouter } from 'next/router';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid'; import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
import { EyeIcon } from '@heroicons/react/24/outline'; import { EyeIcon } from '@heroicons/react/24/outline';
import { Button } from '@tih/ui'; import { Button, Spinner } from '@tih/ui';
import type { BreadcrumbStep } from '~/components/offers/Breadcrumb'; import type { BreadcrumbStep } from '~/components/offers/Breadcrumb';
import { Breadcrumbs } from '~/components/offers/Breadcrumb'; import { Breadcrumbs } from '~/components/offers/Breadcrumb';
@ -68,46 +68,56 @@ export default function OffersSubmissionResult() {
}, [step]); }, [step]);
return ( return (
<div ref={pageRef} className="fixed h-full w-full overflow-y-scroll"> <>
<div className="mb-20 flex justify-center"> {getAnalysis.isLoading && (
<div className="my-5 block w-full max-w-screen-md rounded-lg bg-white py-10 px-10 shadow-lg"> <Spinner className="m-10" display="block" size="lg" />
<div className="mb-4 flex justify-end"> )}
<Breadcrumbs {!getAnalysis.isLoading && (
currentStep={step} <div ref={pageRef} className="fixed h-full w-full overflow-y-scroll">
setStep={setStep} <div className="mb-20 flex justify-center">
steps={breadcrumbSteps} <div className="my-5 block w-full max-w-screen-md rounded-lg bg-white py-10 px-10 shadow-lg">
/> <div className="mb-4 flex justify-end">
</div> <Breadcrumbs
{steps[step]} currentStep={step}
{step === 0 && ( setStep={setStep}
<div className="flex justify-end"> steps={breadcrumbSteps}
<Button />
disabled={false} </div>
icon={ArrowRightIcon} {steps[step]}
label="Next" {step === 0 && (
variant="secondary" <div className="flex justify-end">
onClick={() => setStep(step + 1)} <Button
/> disabled={false}
</div> icon={ArrowRightIcon}
)} label="Next"
{step === 1 && ( variant="secondary"
<div className="flex items-center justify-between"> onClick={() => setStep(step + 1)}
<Button />
icon={ArrowLeftIcon} </div>
label="Previous" )}
variant="secondary" {step === 1 && (
onClick={() => setStep(step - 1)} <div className="flex items-center justify-between">
/> <Button
<Button icon={ArrowLeftIcon}
href={getProfilePath(offerProfileId as string, token as string)} label="Previous"
icon={EyeIcon} variant="secondary"
label="View your profile" onClick={() => setStep(step - 1)}
variant="primary" />
/> <Button
href={getProfilePath(
offerProfileId as string,
token as string,
)}
icon={EyeIcon}
label="View your profile"
variant="primary"
/>
</div>
)}
</div> </div>
)} </div>
</div> </div>
</div> )}
</div> </>
); );
} }

Loading…
Cancel
Save