github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: module and cycle sidebar loading state (#2831)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-11-22 15:34:39 +05:30 committed by GitHub
parent 1dff6b63f8
commit e6a1f34713
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 441 additions and 445 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/components/cycles/sidebar.tsx
View File

@ -270,7 +270,20 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
? Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100) ? Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100)
: null; : null;
if (!cycleDetails) return null; if (!cycleDetails)
return (
<Loader className="px-5">
<div className="space-y-2">
<Loader.Item height="15px" width="50%" />
<Loader.Item height="15px" width="30%" />
</div>
<div className="mt-8 space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</div>
</Loader>
);
const endDate = new Date(cycleDetails.end_date ?? ""); const endDate = new Date(cycleDetails.end_date ?? "");
const startDate = new Date(cycleDetails.start_date ?? ""); const startDate = new Date(cycleDetails.start_date ?? "");
@ -300,7 +313,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
/> />
)} )}
{cycleDetails ? (
<> <>
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div> <div>
@ -536,19 +548,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
</> </>
) : (
<Loader className="px-5">
<div className="space-y-2">
<Loader.Item height="15px" width="50%" />
<Loader.Item height="15px" width="30%" />
</div>
<div className="mt-8 space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</div>
</Loader>
)}
</> </>
); );
}); });

35
web/components/modules/sidebar.tsx
View File

@ -198,7 +198,20 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
setModuleLinkModal(true); setModuleLinkModal(true);
}; };
if (!moduleDetails) return null; if (!moduleDetails)
return (
<Loader className="px-5">
<div className="space-y-2">
<Loader.Item height="15px" width="50%" />
<Loader.Item height="15px" width="30%" />
</div>
<div className="mt-8 space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</div>
</Loader>
);
const startDate = new Date(moduleDetails.start_date ?? ""); const startDate = new Date(moduleDetails.start_date ?? "");
const endDate = new Date(moduleDetails.target_date ?? ""); const endDate = new Date(moduleDetails.target_date ?? "");
@ -230,7 +243,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
updateIssueLink={handleUpdateLink} updateIssueLink={handleUpdateLink}
/> />
<DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} /> <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
{module ? (
<> <>
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div> <div>
@ -435,10 +448,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</div> </div>
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<ChevronDown <ChevronDown className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</div> </div>
</Disclosure.Button> </Disclosure.Button>
<Transition show={open}> <Transition show={open}>
@ -492,19 +502,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
</> </>
) : (
<Loader className="px-5">
<div className="space-y-2">
<Loader.Item height="15px" width="50%" />
<Loader.Item height="15px" width="30%" />
</div>
<div className="mt-8 space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</div>
</Loader>
)}
</> </>
); );
}); });