VUU-333: Improve Screenshot Functionality

[vferraro-scottlogic]

There is an open BUG tracking this issue on the html-to-image repo. The following changes are aimed at mitigating the issue with the UI freezing when taking a screenshot of a very complex layout

Changes

• When taking the screenshot, filter DOM elements out based on role (exclude the content of every element that has role="row")
• add spinner while image is loading
• takeScreenshot function will reject with an error message if something went wrong while taking the screenshot
• SaveLayoutDialog will render:
  • a screenshot if screenshot state is not undefined
  • an error message if screenshotErrorMessage is not undefined
  • or else a spinner

Before

After

takeScreenshot function throws error (in this case the error is thrown because the layout is not displayed in the DOM)

Note

• Filtering out the row elements means we won't be displaying the content of the tables inside the screenshot which could be a positive thing if we are worried about the data being sensitive

[netlify]

✅ Deploy Preview for papaya-valkyrie-395400 ready!

Name	Link
🔨 Latest commit	fa1ed92
🔍 Latest deploy log	https://app.netlify.com/sites/papaya-valkyrie-395400/deploys/6579bddae6e2d30008181d4a
😎 Deploy Preview	https://deploy-preview-1076--papaya-valkyrie-395400.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.