Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-44431

content being loaded before CSS making horrible flickers

    XMLWordPrintable

    Details

    • Epic Link:
    • Sprint:
      Blue Ocean 1.1, Blue Ocean 1.1
    • Similar Issues:

      Description

      There is a case where css is loaded too late, after components are rendered. 

      This results in a violent flicker from unstyled to styled elements. We need to know that css is loaded appropriately. 

       

      There has been some experimentation https://github.com/jenkinsci/blueocean-plugin/pull/1069

      to try and address this. 

        Attachments

          Issue Links

            Activity

            Hide
            cliffmeyers Cliff Meyers added a comment -

            Since some of the other "flashing styles" issues were fixed in another ticket, we decided to leave this one open and unassign it for now.

            Show
            cliffmeyers Cliff Meyers added a comment - Since some of the other "flashing styles" issues were fixed in another ticket, we decided to leave this one open and unassign it for now.
            Hide
            cliffmeyers Cliff Meyers added a comment -

            This is still a fairly significant issue in other scenarios. Any part of the screen that is rendered via the router will render before CSS is loaded. For example, the main dashboard's header, body content, etc will render immediately since it is not actually being rendered via the Extension.Renderer component. The only React components that will render after the CSS are loaded are those that are contributed to an Extension.Renderer.

            We had some discussions Keith Zantow and Nicolae Pascu where we concluded that ultimately it may easier (and more performant) if all the CSS was loaded upfront in a single file. This would block any initial page rendering until CSS has finished loading and avoid any of these timing issues. This would require some additional work to concatenate the CSS (or Less) from multiple plugins and place the file in a known location that can be loaded via link rel=stylesheet tag in blueocean-web's index.jelly.

            Show
            cliffmeyers Cliff Meyers added a comment - This is still a fairly significant issue in other scenarios. Any part of the screen that is rendered via the router will render before CSS is loaded. For example, the main dashboard's header, body content, etc will render immediately since it is not actually being rendered via the Extension.Renderer component. The only React components that will render after the CSS are loaded are those that are contributed to an Extension.Renderer. We had some discussions Keith Zantow and Nicolae Pascu where we concluded that ultimately it may easier (and more performant) if all the CSS was loaded upfront in a single file. This would block any initial page rendering until CSS has finished loading and avoid any of these timing issues. This would require some additional work to concatenate the CSS (or Less) from multiple plugins and place the file in a known location that can be loaded via link rel=stylesheet tag in blueocean-web's index.jelly.

              People

              • Assignee:
                Unassigned
                Reporter:
                michaelneale Michael Neale
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated: