KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Delay in displaying KoolReport View #2964

Open Richb201 opened this topic on on Jan 28, 2023 - 6 comments

Richb201 commented on Jan 28, 2023

When my app first loads up I download a users images from S3 to my application server. This is due to KoolReport not being able to display directly from S3. This data transfer is done on the AWS backbone in parallel so it is usually pretty fast. I also display a custom made KoolReport dashboard. I have been noticing that sometimes I get a regular old html screen for a second, before the actual KoolReport View appears. It is not terrible, but somewhat unprofessional. Is there anyway to make sure that the View paints the screen before the rest of the "setup stuff" happens?

Sebastian Morales commented on Jan 30, 2023

In your Dashboard app's index.php, pls add the following lines to stop unstyled html flashing:

<html class='hidden'>
  <head>
  <style type="text/css">
    .hidden {
        display:none;
    }
  </style>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('html').classList.remove('hidden');
    });
   </script>
   </head>
   <body>
   <?php
        require_once "path/to/vendor/autoload.php"; // change this to your path to your vendor or koolreport autoload.php

        require_once "src/App.php";

        \demo\App::create()->run();
    ?>
   </body>
</html>
Richb201 commented on Jan 30, 2023

Sebastian, there are two files that make up the dashboard, dashboard.php and dashboard. view.php. the only index.php is for the entire app. Is that where I place the above code?

Sebastian Morales commented on Jan 30, 2023

It would be index.php or any file where you create and run the App object:

//index.php 
require_once "src/App.php";
App::create()->run();
Richb201 commented on Jan 30, 2023

I pasted

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelector('html').classList.remove('hidden');
        });
    </script>

Into the head in the view file. This seems to have no effect on the html flashing.

Sebastian Morales commented on Jan 31, 2023

Did you add "hidden" class to your html tag?

Richb201 commented on Jan 31, 2023

No, I didn't.. where does that go? In the .view.file?

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

None