793 separate pdf renderer into own chunk (#864)

ScottLogic · Mar 25, 2024 · 47e4523 · 47e4523
1 parent dce956f
commit 47e4523
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 16 deletions.
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
@@ -108,7 +108,7 @@
 	--chat-alerted-text-colour: teal;
 	--chat-triggered-text-colour: var(--error-colour);
 	--chat-button-background-colour: #eee;
-	--chat-button-background-colour-hover: #dedede;
+	--chat-button-background-colour-hover: #cecece;
 	--chat-button-border-colour: #ccc;
 	--chat-button-text-colour: #444;
 

diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
+import { Suspense, lazy, useEffect, useState } from 'react';
 
 import { DEFAULT_DEFENCES } from '@src/Defences';
-import ExportPDFLink from '@src/components/ExportChat/ExportPDFLink';
 import '@src/components/ThemedButtons/ChatButton.css';
 import LoadingButton from '@src/components/ThemedButtons/LoadingButton';
+import ThemedButton from '@src/components/ThemedButtons/ThemedButton';
 import useUnitStepper from '@src/hooks/useUnitStepper';
 import { ChatMessage, ChatResponse } from '@src/models/chat';
 import { EmailInfo } from '@src/models/email';
@@ -15,6 +15,10 @@ import ChatBoxInput from './ChatBoxInput';
 
 import './ChatBox.css';
 
+const ExportPDFLink = lazy(
+	() => import('@src/components/ExportChat/ExportPDFLink')
+);
+
 function ChatBox({
 	currentLevel,
 	emails,
@@ -232,11 +236,29 @@ function ChatBox({
 					</span>
 				</div>
 				<div className="control-buttons">
-					<ExportPDFLink
-						messages={messages}
-						emails={emails}
-						currentLevel={currentLevel}
-					/>
+					<Suspense
+						fallback={
+							<ThemedButton
+								className={'chat-button chat-button-disabled'}
+								// eslint-disable-next-line @typescript-eslint/no-empty-function
+								onClick={() => {}}
+								ariaDisabled={true}
+								tooltip={{
+									id: 'export-chat-tooltip',
+									text: 'This button is still loading. Please wait...',
+								}}
+								tooltipPosition="top-center"
+							>
+								Export Chat
+							</ThemedButton>
+						}
+					>
+						<ExportPDFLink
+							messages={messages}
+							emails={emails}
+							currentLevel={currentLevel}
+						/>
+					</Suspense>
 					<button className="chat-button" onClick={openResetLevelOverlay}>
 						Reset Level
 					</button>

diff --git a/frontend/src/components/ExportChat/ExportChatBox.tsx b/frontend/src/components/ExportChat/ExportChatBox.tsx
@@ -1,5 +1,4 @@
 import { View, StyleSheet } from '@react-pdf/renderer';
-import { Fragment } from 'react';
 
 import { ChatMessage } from '@src/models/chat';
 
@@ -18,7 +17,7 @@ function ExportChatBox({ items }: { items: ChatMessage[] }) {
 			<ExportChatMessage message={item} />
 		</View>
 	));
-	return <Fragment>{rows}</Fragment>;
+	return <>{rows}</>;
 }
 
 export default ExportChatBox;
diff --git a/frontend/src/components/ThemedButtons/ChatButton.css b/frontend/src/components/ThemedButtons/ChatButton.css
@@ -9,8 +9,13 @@
 	color: var(--chat-button-text-colour);
 	font-weight: 700;
 	font-size: 1rem;
+	width: 100%;
 }
 
 .chat-button:hover {
 	background-color: var(--chat-button-background-colour-hover);
 }
+
+.chat-button[aria-disabled='true']:hover {
+	background-color: var(--action-button-disabled-background-colour);
+}
diff --git a/frontend/src/components/ThemedButtons/ThemedButton.css b/frontend/src/components/ThemedButtons/ThemedButton.css
@@ -40,19 +40,26 @@
 	color: var(--tooltip-text-colour);
 }
 
-.themed-button-tooltip.show.left {
+.themed-button-tooltip.show.top-left {
 	left: 0;
 }
 
-.themed-button-tooltip.show.right {
+.themed-button-tooltip.show.top-right {
 	right: 0;
 }
 
-.themed-button-tooltip.show.center {
+.themed-button-tooltip.show.top-center {
 	right: 50%;
 	transform: translateX(50%);
 }
 
+.themed-button-tooltip.show.bottom-center {
+	right: 50%;
+	transform: translateX(50%);
+	bottom: calc(100% + 0.125rem);
+	top: auto;
+}
+
 .themed-button:hover + .themed-button-tooltip.show,
 .themed-button:focus + .themed-button-tooltip.show {
 	display: block;

diff --git a/frontend/src/components/ThemedButtons/ThemedButton.tsx b/frontend/src/components/ThemedButtons/ThemedButton.tsx
@@ -12,7 +12,11 @@ export interface ThemedButtonProps {
 		id: string;
 		text: string;
 	};
-	tooltipAnchor?: 'left' | 'center' | 'right';
+	tooltipPosition?:
+		| 'bottom-left'
+		| 'bottom-center'
+		| 'bottom-right'
+		| 'top-center';
 	onClick: () => void;
 }
 
@@ -22,7 +26,7 @@ function ThemedButton({
 	ariaLabel,
 	className,
 	tooltip,
-	tooltipAnchor = 'center',
+	tooltipPosition = 'bottom-center',
 	onClick,
 }: ThemedButtonProps) {
 	function onClickDisabledCheck() {
@@ -32,7 +36,7 @@ function ThemedButton({
 	const buttonClass = clsx('themed-button', className, {
 		disabled: ariaDisabled,
 	});
-	const tooltipClass = clsx('themed-button-tooltip', tooltipAnchor, {
+	const tooltipClass = clsx('themed-button-tooltip', tooltipPosition, {
 		show: !!tooltip,
 	});