Waiting page: activate for Nightly. Make it hideable.

mozilla · Nov 18, 2024 · 05775ab · 05775ab
1 parent 8a74f8f
commit 05775ab
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/app/classes/ReleaseInsights/Request.php b/app/classes/ReleaseInsights/Request.php
@@ -119,6 +119,7 @@ public function cleanPath(string $path): string
     public static function waitingPage(string $action): void
     {
         if ($action == 'load') {
+
             // This is a long-running process when we fetch and generate data
             set_time_limit(0);
             // We need to set the encoding or the browser will wait to parse the content
@@ -137,6 +138,9 @@ public static function waitingPage(string $action): void
             // heavy processing is done, let the browser refresh the page
             echo '<meta http-equiv="refresh" content="0">';
             exit;
+        } elseif ($action == 'hide') {
+            // heavy processing is done, let the browser refresh the page
+            echo '<style nonce="' . NONCE . '">.waitingpage .container { display:none; }</style>';
         }
     }
 }
diff --git a/app/models/nightly.php b/app/models/nightly.php
@@ -3,7 +3,9 @@
 declare(strict_types=1);
 
 use BzKarma\Scoring;
-use ReleaseInsights\{Bugzilla, Json, URL, Utils};
+use ReleaseInsights\{Bugzilla, Json, URL, Request, Utils};
+
+Request::waitingPage('load');
 
 /*
     We need previous and next days for navigation and changelog
@@ -237,6 +239,7 @@
     }
 }
 
+Request::waitingPage('hide');
 return [
     $display_date,
     $nightly_pairs,

diff --git a/app/views/waiting_page.html.php b/app/views/waiting_page.html.php
@@ -2,49 +2,49 @@
     // This is a pure old-schol PHP template as the waiting page doesn't depend on Twig
 ?>
 <!DOCTYPE html>
-<html>
+<html class="waitingpage">
 <head>
-    <title>Processing data…</title>
     <meta charset="utf-8" />
     <style nonce="<?=NONCE?>">
-        html, body {
+        html.waitingpage, html.waitingpage body {
             margin: 0;
             padding: 0;
             height: 100%;
             font-family: sans-serif;
             background-color: #2a0c55;
         }
-        .container {
+
+        .waitingpage .container {
             height: 100%;
             width: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
         }
 
-        .item {
-            min-width: 30%;
+        .waitingpage .item {
+            min-width: 20%;
             text-align: center;
             color:black;
             background-color: white;
-            padding: 20px;
+            padding: 10px 0;
             border-radius: 10px;
             font-weight: normal;
             font-size: 18px;
-            line-height: 40px;
-            box-shadow: 12px 12px 12px rgba(0,0,0,0.1);
+            line-height: 30px;
+            color: rgb(33, 37, 41);
         }
 
-        #html-spinner {
-            width: 40px;
-            height: 40px;
+        .waitingpage #html-spinner {
+            width: 30px;
+            height: 30px;
             border: 4px solid #0dcaf0;
             border-top: 4px solid white;
             border-radius: 50%;
-            margin-right: 40px;
+            margin-right: 15px;
         }
 
-        #html-spinner {
+        .waitingpage #html-spinner {
             transition-property: transform;
             animation-name: rotate;
             animation-duration: 1.2s;
@@ -58,7 +58,7 @@
         }
 
         /* spinner positioning */
-        #html-spinner {
+        .waitingpage #html-spinner {
             display: inline-block;
             vertical-align: middle;
         }