flash of unstyled text on report loading

eLearning commented on Jul 29, 2021

We see a FOUC issue in KoolReport when loading a default report the first time without browser cache. The assets path in the settings function. The problem is that all the assets including the JS files are loaded in the <HEAD> section of the page which seems to be the problem. Is it possible to load the JS files in the footer and only the CSS files in the HEAD which could solve this problem?

public function settings() {
		return array(
			'assets'      => array(
				'path' => __DIR__ . '/assets',
				'url'  => '/kool_report/assets',
			),
			'dataSources' => array(),
		);
	}

Repo link to reproduce the issue on your end.

https://github.com/adeel-raza/KoolReportTest

Sebastian Morales commented on Jul 30, 2021

Pls try this CSS solution:

Eliminate flash of unstyled content

Let us know if it works for you. Tks,

eLearning commented on Jul 30, 2021

It's not a very elegant solution. However, how to apply it with KoolReport. Can you share an example?

Sebastian Morales commented on Aug 2, 2021

Just use this html template for your report view:

<html>
  <head>
    <style>
      html {
        display: none;
      }
    </style>
    ...
  </head>
  <body>
    ...
    <link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } in app.css -->
  </body>
</html>

if you don't want to use html and body in your report view, just add an outside div with a class name:


    <style>
      div.report-wrapper {
        display: none;
      }
    </style>
  <div class="report-wrapper">
    ...
    <link rel="stylesheet" href="app.css"> <!-- should set div.report-wrapper { display: block; } -->
  </div>

KoolReport's Forum

Flash of unstyled text on report loading #2238

Build Your Excellent Data Report