fix: Cache iframe ObjectURL. Closes #1629

h2oai · Aug 28, 2023 · 89e6768 · 89e6768
1 parent 4d7be85
commit 89e6768
Showing 1 changed file with 14 additions and 14 deletions.
diff --git a/ui/src/frame.tsx b/ui/src/frame.tsx
@@ -95,9 +95,10 @@ const
   // replace ' src="/' -> ' src="http://foo.bar.baz:8080/'
   fixrefs = (s: S): S => s.replace(/(\s+src\s*=\s*["'])\//g, `$1${window.location.protocol}//${window.location.host}/`),
   inline = (s: S): S => URL.createObjectURL(new Blob([fixrefs(s)], { type: 'text/html' })),
-  InlineFrame = ({ path, content }: { path?: S, content?: S }) => (
-    <iframe title={xid()} src={path ? path : content ? inline(content) : inline('Nothing to render.')} frameBorder="0" width="100%" height="100%" />
-  )
+  InlineFrame = ({ path, content }: { path?: S, content?: S }) => {
+    const src = React.useMemo(() => path ? path : content ? inline(content) : inline('Nothing to render.'), [path, content])
+    return <iframe title={xid()} src={src} frameBorder="0" width="100%" height="100%" />
+  }
 
 // HACK: Applying width/height styles directly on iframe don't work in Chrome/FF; so wrap in div instead.
 export const XFrame = ({ model: { name, path, content, width = '100%', height = '150px' } }: { model: Frame }) => (
@@ -107,17 +108,16 @@ export const XFrame = ({ model: { name, path, content, width = '100%', height =
 )
 
 
-export const
-  View = bond(({ name, state, changed }: Model<State>) => {
-    const render = () => (
-      <div data-test={name} className={clas(css.card, state.compact ? '' : css.cardPadding)}>
-        {!state.compact && <div className='wave-s12 wave-w6'>{state.title}</div>}
-        <div className={css.body}>
-          <InlineFrame path={state.path} content={state.content} />
-        </div>
+export const View = bond(({ name, state, changed }: Model<State>) => {
+  const render = () => (
+    <div data-test={name} className={clas(css.card, state.compact ? '' : css.cardPadding)}>
+      {!state.compact && <div className='wave-s12 wave-w6'>{state.title}</div>}
+      <div className={css.body}>
+        <InlineFrame path={state.path} content={state.content} />
       </div>
-    )
-    return { render, changed }
-  })
+    </div>
+  )
+  return { render, changed }
+})
 
 cards.register('frame', View)