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

content being loaded before CSS making horrible flickers

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Critical Critical
    • blueocean-plugin
    • None
    • Blue Ocean 1.1, Blue Ocean 1.1

      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. 

          [JENKINS-44431] content being loaded before CSS making horrible flickers

          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 kzantow and nicu 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.

          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 kzantow and nicu 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.

          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.

          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.

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

              Created:
              Updated: