LRSD-11337 Fix download url loading

Author: ryanschuhler

workspaces/liferay-customer-workspace/client-extensions/liferay-customer-custom-element/src/features/attachments/pages/routes/Outlets/AttachmentDownloaderOutlet.tsx

@@ -32,13 +32,16 @@ const renderErrorComponent = (errorCode: string | null) => {
 };
 
 const AttachmentDownloaderOutlet = () => {
-	const {ticketAttachmentERC, ticketAttachmentId} = useParams();
-	const {errorCode, hasAccess, loading} = useCheckAttachmentAccess();
-	const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
 	const [downloadError, setDownloadError] = useState<string | null>(null);
+	const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+	const [downloadUrlLoading, setDownloadUrlLoading] = useState(false);
+	const {errorCode, hasAccess, loading} = useCheckAttachmentAccess();
+	const {ticketAttachmentERC, ticketAttachmentId} = useParams();
 
 	useEffect(() => {
 		const fetchDownloadURL = async () => {
+			setDownloadUrlLoading(true);
+
 			try {
 				const endpoint = ticketAttachmentId
 					? `/ticket-attachments/by-id/${ticketAttachmentId}/download`
@@ -63,14 +66,17 @@ const AttachmentDownloaderOutlet = () => {
 					i18n.translate('error-downloading-attachment')
 				);
 			}
+			finally {
+				setDownloadUrlLoading(false);
+			}
 		};
 
 		if (hasAccess && (ticketAttachmentERC || ticketAttachmentId)) {
 			fetchDownloadURL();
 		}
 	}, [hasAccess, ticketAttachmentERC, ticketAttachmentId]);
 
-	if (loading) {
+	if (loading || downloadUrlLoading) {
 		return (
 			<div className="mx-auto">
 				<ClayLoadingIndicator size="sm" />