Upgrade to 2.9.0 caused loading bar to not appear in production builds of addons.mozilla.org about react-redux-loading-bar

[tofumatt]

Will do, sorry I haven't tried the fix sooner and thanks so much for your work looking into it and fixing it with the little info I gave! Just been busy with another part of the project but I'll try it this week hopefully 😄

[tofumatt]

Just wanted to let you know I tested this on our production build (locally) and it seems to have worked perfectly. Thanks so much for tracking this down and the quick fix! 😄

[mironov]

@tofumatt Thanks for the bug report, it was a tricky one!

The problem can be reproduced with Server Side Rendering and strict Content Security Policy for styles (i.e. style-src doesn't have 'unsafe-inline').

Some context:
I intentionally haven't introduced any dependencies or CSS files into the loading bar to keep it lightweight and easy to configure. It can be used without any preprocessors.

When the browser loads an SSR page, it blocks inline styles on its elements. Once Loading Bar kicks in, it alters its inline styles to emulate progress. Turned out that style attributes that were initially blocked will not be applied to the element unless they change.

Inline styles in 2.8.2:

  var style = {
    width: this.state.percent + '%',
    transition: 'width ' + ANIMATION_TIME + 'ms linear',
    opacity: '1'
  }

  if (this.shouldShow()) {
    style.opacity = '1';
  } else {
    style.opacity = '0';
  }

width and opacity are dynamic attributes. The transition attribute will never be applied to the element as it was initially blocked by CSP and never changes. However, the animation will be shown because width and opacity combined with custom CSS class for color, height, and positioning is enough to make it work.

Inline styles in 2.9.0:

  var style = {
    opacity: '1',
    transform: 'scaleX(' + this.state.percent / 100 + ')',
    transformOrigin: 'left',
    transition: 'transform ' + ANIMATION_TIME + 'ms linear',
    width: '100%',
    willChange: 'transform, opacity'
  }

  if (this.shouldShow()) {
    style.opacity = '1';
  } else {
    style.opacity = '0';
  }

Static styles as transformOrigin, transition, width, willChange will be ignored.
That change in animation mechanics in 2.9.0 revealed the problem.

Please give v2.9.1 a try.
It renders a placeholder on the server side and replaces it with the actual Loading Bar with proper styles after mount. That should not trigger CSP warnings on initial page render and fix the animation.

[mironov]

@tofumatt I'm going to close this issue as I think it is resolved in v2.9.1.
Feel free to reopen if the fix didn't work for you.