feat: enhance loader with dynamic logo selection and quality optimization (#1431)

* feat: enhance loader with dynamic logo selection and quality optimization

- Add JavaScript to dynamically select loader image from available formats
- Support multiple image formats (jpg, jpeg, png, gif, webp, svg)
- Add 'Loading...' text inside SVG fallback image
- Optimize image rendering quality with crisp-edges and high-quality settings
- Improve CSS layout with flexbox for better centering

Signed-off-by: Oleksii Orel <[email protected]>

Author: olexii4

packages/dashboard-frontend/assets/branding/branding.css

@@ -1,27 +1,39 @@
 /* Add your branding customizations here. */
 .main-page-loader {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   z-index: 80;
+  inset: 0;
+
   margin: auto;
-  color: #fff;
-  font-size: 24px;
+
   font-family: Helvetica, Arial, sans-serif;
+  font-size: 24px;
+  color: #fff;
+
   background-color: #000;
 }
 
-.main-page-loader .ide-page-loader-content img {
+.main-page-loader .ide-page-loader-content {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-page-loader .ide-page-loader-content img {
   max-width: 140px;
   max-height: 140px;
-  margin: auto;
+
+  object-fit: contain;
+
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  image-rendering: high-quality;
+
   animation-name: opacity;
   animation-duration: 2s;
   animation-timing-function: ease-in-out;

packages/dashboard-frontend/index.html

@@ -26,9 +26,10 @@
 <div id="ui-container" style="height: 100%;">
   <div class="main-page-loader">
     <div class="ide-page-loader-content">
-      <img src="./assets/branding/loader.svg" alt="Loading..."/>
+      <img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2050%22%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20fill%3D%22%23fff%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2224%22%3ELoading...%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Loading..."/>
     </div>
   </div>
 </div>
+<script src="/dashboard/static/preload/branding-loader.js"></script>
 </body>
 </html>

packages/dashboard-frontend/src/preload/brandingLoader.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2018-2025 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+/**
+ * Base path to the branding assets directory.
+ * Used for loading the appropriate loader image format.
+ */
+const BRANDING_ASSETS_PATH = '/dashboard/assets/branding/';
+
+/**
+ * Dynamically loads the appropriate loader image based on availability.
+ * Checks formats in priority order: jpg, jpeg, png, gif, webp, svg (fallback).
+ * The SVG format is used as the default fallback if no other format is available.
+ *
+ * @param basePath - The base path to the branding assets directory
+ * @param selector - CSS selector for the image element (default: '.ide-page-loader-content img')
+ */
+function loadBrandingLogo(
+  basePath: string,
+  selector: string = '.ide-page-loader-content img',
+): void {
+  const imageFormats = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'] as const;
+  const imgElement = document.querySelector<HTMLImageElement>(selector);
+
+  if (!imgElement) {
+    return;
+  }
+
+  /**
+   * Attempts to load an image format by checking if it exists via HEAD request.
+   * If successful, updates the image source and stops further checks.
+   */
+  async function tryLoadFormat(format: string): Promise<boolean> {
+    if (!imgElement) {
+      return false;
+    }
+    try {
+      const response = await fetch(`${basePath}loader.${format}`, { method: 'HEAD' });
+      if (response.ok) {
+        imgElement.src = `${basePath}loader.${format}`;
+        return true;
+      }
+    } catch {
+      // Silently continue to next format if fetch fails
+    }
+    return false;
+  }
+
+  /**
+   * Iterates through all formats and loads the first available one.
+   * SVG is guaranteed to be checked as the last fallback.
+   */
+  async function loadFirstAvailable(): Promise<void> {
+    for (const format of imageFormats) {
+      const loaded = await tryLoadFormat(format);
+      if (loaded) {
+        return;
+      }
+    }
+  }
+
+  loadFirstAvailable();
+}
+
+/**
+ * Initializes the branding logo loader when the window is fully loaded.
+ * This ensures the DOM is ready and the image element exists.
+ */
+function initBrandingLoader(basePath: string): void {
+  if (document.readyState === 'loading') {
+    window.addEventListener('load', () => {
+      loadBrandingLogo(basePath);
+    });
+  } else {
+    // DOM is already loaded, execute immediately
+    loadBrandingLogo(basePath);
+  }
+}
+
+// Initialize branding loader with the configured base path
+initBrandingLoader(BRANDING_ASSETS_PATH);

packages/dashboard-frontend/static/loader.html

@@ -19,14 +19,16 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="shortcut icon">
   <link rel="stylesheet" type="text/css" href="/dashboard/assets/branding/branding.css">
+  <title></title>
 </head>
 <body>
 <div style="height: 100%;">
   <div class="main-page-loader">
     <div class="ide-page-loader-content">
-      <img src="/dashboard/assets/branding/loader.svg" alt="Loading..."/>
+      <img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2050%22%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20fill%3D%22%23fff%22%20font-family%3D%22Helvetica%2C%20Arial%2C%20sans-serif%22%20font-size%3D%2224%22%3ELoading...%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Loading..."/>
     </div>
   </div>
 </div>
+<script src="/dashboard/static/preload/branding-loader.js"></script>
 </body>
 </html>

packages/dashboard-frontend/webpack.config.common.js

@@ -20,6 +20,7 @@ const config = {
     client: path.join(__dirname, 'src/index.tsx'),
     'service-worker': path.join(__dirname, 'src/service-worker.ts'),
     'accept-factory-link': path.join(__dirname, 'src/preload/index.ts'),
+    'branding-loader': path.join(__dirname, 'src/preload/brandingLoader.ts'),
   },
   output: {
     path: path.join(__dirname, 'lib', 'public/dashboard'),
@@ -31,6 +32,9 @@ const config = {
       if (pathData.chunk.name === 'service-worker') {
         return '[name].js';
       }
+      if (pathData.chunk.name === 'branding-loader') {
+        return 'static/preload/[name].js';
+      }
       return '[name].[fullhash:8].js';
     },
     chunkFilename: '[name].[chunkhash].js',
@@ -40,8 +44,11 @@ const config = {
   optimization: {
     splitChunks: {
       chunks: (chunk) => {
-        // exclude `accept-factory-link` from being split
-        return chunk.name !== 'accept-factory-link';
+        // exclude preload chunks from being split (they should be standalone)
+        return (
+          chunk.name !== 'accept-factory-link' &&
+          chunk.name !== 'branding-loader'
+        );
       },
       maxAsyncRequests: 30,
       maxInitialRequests: 30,