From 58712445d3301882f0751028088067484b1a2fbb Mon Sep 17 00:00:00 2001
From: Kuba Janik <jakubjanik00@gmail.com>
Date: Mon, 19 Aug 2024 11:59:43 +0200
Subject: [PATCH] feat(ui-mode): pr feedback

---
 .../trace-viewer/src/ui/networkResourceDetails.css   |  5 +++++
 .../trace-viewer/src/ui/networkResourceDetails.tsx   | 12 ++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.css b/packages/trace-viewer/src/ui/networkResourceDetails.css
index 0f91b4f68c..a2d3f5a86f 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.css
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.css
@@ -59,6 +59,11 @@
   text-align: center;
 }
 
+.network-font-preview-error {
+  margin-top: 8px;
+  text-align: center;
+}
+
 .tab-network .toolbar {
   min-height: 30px !important;
   background-color: initial !important;
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index af5411a0e3..f80ab99015 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -116,7 +116,7 @@ const BodyTab: React.FunctionComponent<{
           reader.readAsDataURL(blob);
           setResponseBody({ dataUrl: (await eventPromise).target.result });
         } else if (isFont) {
-          const font = await response.blob().then(blob => blob.arrayBuffer());
+          const font = await response.arrayBuffer();
           setResponseBody({ font });
         } else {
           const formattedBody = formatBody(await response.text(), resource.response.content.mimeType);
@@ -141,15 +141,23 @@ const BodyTab: React.FunctionComponent<{
 const FontPreview: React.FunctionComponent<{
   font: BinaryData;
 }> = ({ font }) => {
+  const [isError, setIsError] = React.useState(false);
+
   React.useEffect(() => {
     const fontFace = new FontFace('font-preview', font);
-    document.fonts.add(fontFace);
+    if (fontFace.status === 'loaded')
+      document.fonts.add(fontFace);
+    if (fontFace.status === 'error')
+      setIsError(true);
 
     return () => {
       document.fonts.delete(fontFace);
     };
   }, [font]);
 
+  if (isError)
+    return <div className='network-font-preview-error'>Could not load font preview</div>;
+
   return <div className='network-font-preview'>
     ABCDEFGHIJKLM<br />
     NOPQRSTUVWXYZ<br />