[BUG] `position: absolute` delays loading

[jamesarosen]

I wanted to hide the <tableau-viz> loading spinner in favor of one native to our application. In order to do that, I tried

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
</style>
<tableau-viz class="sr-only" src="the workbook URL" />
<script>
  const renderStart = performance.now();
  const viz = document.querySelector('tableau-viz');
  viz.addEventListener('firstinteractive', () => {
    const renderEnd = performance.now();
    performance.measure('tableau.render', { start: renderStart, end: renderEnd });
    viz.classList.remove('sr-only');
  });
</script>

When I did that, the load times went up by 10,000ms!

I played around with the .sr-only class and found that the position: absolute was the biggest factor.

I was able to work around the problem by setting height and width to 0px during the load:

<tableau-viz height="0px" src="the workbook URL" width="0px" />
<script>
  const renderStart = performance.now();
  const viz = document.querySelector('tableau-viz');
  viz.addEventListener('firstinteractive', () => {
    const renderEnd = performance.now();
    performance.measure('tableau.render', { start: renderStart, end: renderEnd });
    viz.removeAttribute('height');
    viz.removeAttribute('width');
  });
</script>

But the docs say

If the size of the content area specified by the HTML element is invalid (for example, height=0), the default size of the view is 800 (width) by 600 (height) pixels.

so I'm not confident that will continue to work.