thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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 sriram veeraghanta
parent 9215134e32
commit 1559822a1b
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)
: 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 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>
@ -536,19 +548,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
</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);
};
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 endDate = new Date(moduleDetails.target_date ?? "");
@ -230,7 +243,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
updateIssueLink={handleUpdateLink}
/>
<DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
{module ? (
<>
<div className="flex items-center justify-between w-full">
<div>
@ -435,10 +448,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</div>
<div className="flex items-center gap-2.5">
<ChevronDown
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
<ChevronDown className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
</div>
</Disclosure.Button>
<Transition show={open}>
@ -492,19 +502,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</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>
)}
</>
);
});