OpenCerts/opencerts-website

reloading of the document viewer

Closed this issue · 7 comments

wmclaxton commented

The document viewer is being continuously reloaded on the OpenCerts.io verifier page. This is apparent from the console as shown in this screenshot. The comment 'Renderer Type: Embedded' is generated by a debug statement in the file 'src/components/documentViewer/documentViewer.js'. We do not observe this behaviour in the renderer when running separately from the verifier page.

Here is a snippet that shows where the debug statement is located:

const DocumentViewer = (props) => {
  const { tabIndex, document, handleHeightUpdate, handleObfuscation } = props;
  const templates = documentTemplates(document, handleHeightUpdate);
  const Template = templates[tabIndex].template;
  console.log("Renderer Type: Embedded");
  return <Template document={document} handleObfuscation={handleObfuscation} />;
};
Nebulis commented

Did you open the issue in the wrong repo ? This looks like to have nothing to do with this repository (which is just a lib to run verification)

Also src/components/documentViewer/documentViewer.js does not exist in https://github.com/OpenCerts/opencerts-website so I'm not sure what you are referring to

From your code the console can be run if any of the props (tabIndex, document, handleHeightUpdate, handleObfuscation) change

wmclaxton commented

I believe this issue relates to the frameless viewer. I am happy to move it if you can point me in the right direction.

Nebulis commented

Let's keep it here for the moment as I am not sure what the problem is related to. If you want me to help I will need to see more than the snippet above as there could have many reason for a react component re-render

wmclaxton commented

I am checking with my team if this 'src/components/documentViewer/documentViewer.js' was created by us. I can also share access to our repo for the renderer component.

Nebulis commented

Having access to your repo would greatly help 👍

Nebulis commented

I "found" the problem which is due to Opencerts, it's actually something I noticed a while ago but that was not causing problem (and still not causing any problems), but I decided to fix it to avoid confusion.

You can find the patch here => 1f98061

In details, without useMemo, getData function will return a new object (same content, different reference) and thus will send again the document here => https://github.com/OpenCerts/opencerts-website/blob/master/src/components/DecentralisedTemplateRenderer/DecentralisedRenderer.tsx#L55

Few things to note:

  1. I would recommend to try out the template that we provide and that abstract all the connection needed between the host and the frame => https://github.com/Open-Attestation/decentralized-renderer-react-template.
    Here is some documentation if needed => https://openattestation.com/docs/verifiable-document/document-template
  2. There is some invalid JSX in the templates
    image

I will move this issue to https://github.com/OpenCerts/opencerts-website and keep it open for a while, let me know if it helped you

wmclaxton commented

Apologies again for posting in the wrong repo. More importantly, thank you for identifying this issue and resolving it. We will test this fix and let you know how it goes. Regarding the JSX, thanks for the heads up.

  • 👍1