Prevent unstyled flashes of Kickoff content and team badge images

Events.php

@@ -3,6 +3,7 @@
 namespace humhub\modules\kickoff;
 
 use humhub\modules\kickoff\adapters\ManualAdapter;
+use humhub\modules\kickoff\assets\Assets;
 use humhub\modules\kickoff\models\Competition;
 use humhub\modules\kickoff\services\KickoffTime;
 use humhub\modules\kickoff\services\MatchdayBonusService;
@@ -16,6 +17,16 @@
 
 class Events
 {
+    /**
+     * Loads the Kickoff stylesheet (~8 KB, cached) on every full page load,
+     * so Pjax navigation never swaps in Kickoff content before its styles
+     * are available (brief unstyled flash, most visible in Firefox).
+     */
+    public static function onLayoutAddonsBeforeRun($event): void
+    {
+        $event->sender->view->registerAssetBundle(Assets::class);
+    }
+
     public static function onTopMenuInit($event): void
     {
         try {

config.php

@@ -3,13 +3,15 @@
 use humhub\commands\CronController;
 use humhub\modules\admin\widgets\AdminMenu;
 use humhub\modules\kickoff\Events;
+use humhub\widgets\LayoutAddons;
 use humhub\widgets\TopMenu;
 
 return [
     'id' => 'kickoff',
     'class' => 'humhub\modules\kickoff\Module',
     'namespace' => 'humhub\modules\kickoff',
     'events' => [
+        ['class' => LayoutAddons::class, 'event' => LayoutAddons::EVENT_BEFORE_RUN, 'callback' => [Events::class, 'onLayoutAddonsBeforeRun']],
         ['class' => TopMenu::class, 'event' => TopMenu::EVENT_INIT, 'callback' => [Events::class, 'onTopMenuInit']],
         ['class' => AdminMenu::class, 'event' => AdminMenu::EVENT_INIT, 'callback' => [Events::class, 'onAdminMenuInit']],
         ['class' => CronController::class, 'event' => CronController::EVENT_ON_HOURLY_RUN, 'callback' => [Events::class, 'onCronHourly']],

docs/CHANGELOG.md

@@ -12,6 +12,8 @@ Changelog
 - Enh: The competition admin view gains a "Teams" page listing all participating teams with their national flag, name and group.
 - Enh: Leaderboards now show a count for every scoring tier — a new "Tendency" column alongside Exact and Goal diff — with clearer headings (Total / Exact / Goal diff / Tendency) and explanatory tooltips. Ties are now broken by total points, then exact-score hits, then correct goal differences, then correct tendencies.
 - Fix: England no longer displays as "United Kingdom" with the Union Jack — England, Scotland and Wales now use their own flags (Unicode subdivision tag sequences) with their proper names; Kosovo (KVX) resolves to its localized name and flag; Northern Ireland falls back to a neutral initials badge (it has no emoji flag).
+- Fix: Team flag/logo images no longer flash at full content width while the page stylesheet is loading (visible in Firefox) — badge images now carry explicit dimensions.
+- Fix: Kickoff pages no longer show briefly unstyled when navigated to in-app (Pjax swaps content in before the page's stylesheet has loaded) — the small Kickoff stylesheet now loads with every full page load via a layout addon.
 
 1.0.4 (June 3,2026)
 -------------------

views/competition/_team_badge.php

@@ -44,13 +44,17 @@
 $color = $team ? $palette[$team->id % count($palette)] : '#9ca3af';
 
 ?>
+<?php /* Explicit width/height: the Twemoji SVGs carry no intrinsic size, so
+         without attributes the image briefly renders at full content width
+         before the stylesheet applies (visible flash in Firefox). The badge
+         CSS still overrides the final size. */ ?>
 <?php if ($logo): ?>
     <span class="kickoff-team-badge" title="<?= Html::encode($name) ?>">
-        <img src="<?= Html::encode($logo) ?>" alt="<?= Html::encode($name) ?>">
+        <img src="<?= Html::encode($logo) ?>" alt="<?= Html::encode($name) ?>" width="28" height="28">
     </span>
 <?php elseif ($flagUrl !== null): ?>
     <span class="kickoff-team-badge kickoff-team-badge--flag" title="<?= Html::encode($name) ?>">
-        <img src="<?= Html::encode($flagUrl) ?>" alt="<?= Html::encode($name) ?>">
+        <img src="<?= Html::encode($flagUrl) ?>" alt="<?= Html::encode($name) ?>" width="28" height="28">
     </span>
 <?php else: ?>
     <span class="kickoff-team-badge" title="<?= Html::encode($name) ?>" style="background: <?= $color ?>;">