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

content being loaded before CSS making horrible flickers

    Details

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

      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

            michaelneale Michael Neale created issue -
            michaelneale Michael Neale made changes -
            Field Original Value New Value
            Epic Link JENKINS-35749 [ 171790 ]
            michaelneale Michael Neale made changes -
            Status Open [ 1 ] In Progress [ 3 ]
            michaelneale Michael Neale made changes -
            Link This issue blocks JENKINS-38982 [ JENKINS-38982 ]
            jamesdumay James Dumay made changes -
            Sprint Blue Ocean 1.1 [ 321 ] Blue Ocean 1.1, Blue Ocean 1.1 [ 321, 331 ]
            cliffmeyers Cliff Meyers made changes -
            Status In Progress [ 3 ] Open [ 1 ]
            cliffmeyers Cliff Meyers made changes -
            Assignee Nicolae Pascu [ nicu ]
            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.
            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.
            jamesdumay James Dumay made changes -
            Sprint Blue Ocean 1.1, Blue Ocean 1.1 [ 321, 331 ] Blue Ocean 1.1, Blue Ocean 1.1, Blue Ocean 1.2-beta1 [ 321, 331, 336 ]
            jamesdumay James Dumay made changes -
            Sprint Blue Ocean 1.1, Blue Ocean 1.1, Blue Ocean 1.2-beta1 [ 321, 331, 336 ] Blue Ocean 1.1, Blue Ocean 1.1 [ 321, 331 ]
            jamesdumay James Dumay made changes -
            Sprint Blue Ocean 1.1, Blue Ocean 1.1 [ 321, 331 ] Blue Ocean 1.1, Blue Ocean 1.1, Blue Ocean 1.2-beta2 [ 321, 331, 341 ]
            jamesdumay James Dumay made changes -
            Rank Ranked higher
            jamesdumay James Dumay made changes -
            Sprint Blue Ocean 1.1, Blue Ocean 1.1, Blue Ocean 1.2-beta2 [ 321, 331, 341 ] Blue Ocean 1.1, Blue Ocean 1.2, Blue Ocean 1.1 [ 321, 326, 331 ]
            jamesdumay James Dumay made changes -
            Rank Ranked lower
            jamesdumay James Dumay made changes -
            Sprint Blue Ocean 1.1, Blue Ocean 1.2, Blue Ocean 1.1 [ 321, 326, 331 ] Blue Ocean 1.3, Blue Ocean 1.1, Blue Ocean 1.1 [ 296, 321, 331 ]
            jamesdumay James Dumay made changes -
            Rank Ranked lower
            jamesdumay James Dumay made changes -
            Sprint Blue Ocean 1.3-beta-2, Blue Ocean 1.1, Blue Ocean 1.1 [ 296, 321, 331 ] Blue Ocean 1.4, Blue Ocean 1.1, Blue Ocean 1.1 [ 311, 321, 331 ]
            jamesdumay James Dumay made changes -
            Rank Ranked higher
            jamesdumay James Dumay made changes -
            Sprint Blue Ocean 1.5 - candidates, Blue Ocean 1.1, Blue Ocean 1.1 [ 311, 321, 331 ] Blue Ocean 1.1, Blue Ocean 1.1 [ 321, 331 ]
            jamesdumay James Dumay made changes -
            Rank Ranked higher

              People

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

                Dates

                • Created:
                  Updated: