Skip to content

N°8673 - Avoid server overload when user access news page with a lot of unread news #816

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jf-cbd merged 8 commits into from
Feb 23, 2026
Merged

N°8673 - Avoid server overload when user access news page with a lot of unread news #816

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1754bd9
Change icon block + add lazy loading on news
jf-cbd Feb 19, 2026
9a88801
Add retro compatibility
jf-cbd Feb 20, 2026
42752e6
Fix incorrect @see
jf-cbd Feb 20, 2026
d89f689
Update css/backoffice/components/_title.scss
jf-cbd Feb 20, 2026
3e2a0ac
Update templates/base/components/panel/layout.html.twig
jf-cbd Feb 20, 2026
2d17b0c
Better retrocompatibility + better help for future removal of classes
jf-cbd Feb 23, 2026
b1ac5a0
Merge remote-tracking branch 'origin/issue/8673-Avoid-server-overload…
jf-cbd Feb 23, 2026
ddfa40b
Fix typo
jf-cbd Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions css/backoffice/components/_panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,12 @@ $ibo-panel--icon--spacing--as-medallion--is-sticking: $ibo-panel--icon--spacing-
$ibo-panel--icon--bottom--as-medallion--is-sticking: -12px !default;
$ibo-panel--icon--border--as-medallion--is-sticking: 1px $ibo-panel--base-border-style $ibo-panel--base-border-color !default;

$ibo-panel--icon-background--size--must-contain: contain !default;
$ibo-panel--icon-background--size--must-cover: cover !default;
$ibo-panel--icon-background--size--must-zoomout: 66.67% !default;
$ibo-panel--icon-img--size--must-contain: contain !default;
$ibo-panel--icon-img--size--must-cover: cover !default;
$ibo-panel--icon-img--size--must-zoomout: 66.67% !default;
$ibo-panel--icon-background--size--must-contain: $ibo-panel--icon-img--size--must-contain; // deprecated, to be removed in favor of $ibo-panel--icon-img--size--must-contain
$ibo-panel--icon-background--size--must-cover: $ibo-panel--icon-img--size--must-cover; // deprecated, to be removed in favor of $ibo-panel--icon-img--size--must-cover
$ibo-panel--icon-background--size--must-zoomout: $ibo-panel--icon-img--size--must-zoomout; // deprecated, to be removed in favor of $ibo-panel--icon-img--size--must-zoomout

$ibo-panel--title--font-size--is-sticking: $ibo-font-size-150 !default;
$ibo-panel--title--color: $ibo-color-grey-900 !default;
Expand Down Expand Up @@ -179,24 +182,25 @@ $ibo-panel--is-selectable--body--after--font-size: $ibo-font-size-700 !default;
min-height: $ibo-panel--icon--size;
}

.ibo-panel--icon-background {
.ibo-panel--icon-img, .ibo-panel--icon-background { // second class is deprecated
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: $ibo-panel--icon-background--size--must-contain;
background-size: $ibo-panel--icon-img--size--must-contain;
}

.ibo-panel--icon-background--must-contain {
background-size: $ibo-panel--icon-background--size--must-contain;
.ibo-panel--icon-img--must-contain, .ibo-panel--icon-background--must-contain { // second class is deprecated
background-size: $ibo-panel--icon-img--size--must-contain;
}

.ibo-panel--icon-background--must-cover {
background-size: $ibo-panel--icon-background--size--must-cover;
.ibo-panel--icon-img--must-cover, .ibo-panel--icon-background--must-cover { // second class is deprecated
background-size: $ibo-panel--icon-img--size--must-cover;
}

.ibo-panel--icon-background--must-zoomout {
background-size: $ibo-panel--icon-background--size--must-zoomout;
.ibo-panel--icon-img--must-zoomout, .ibo-panel--icon-background--must-zoomout { // second class is deprecated
width: $ibo-panel--icon-img--size--must-zoomout;
height: $ibo-panel--icon-img--size--must-zoomout;
}
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The panel icon is now rendered as an <img>, but the CSS still relies on background-* properties (background-size, background-position, etc.). Those properties don't affect <img> rendering, so cover/contain/zoomout behavior will be broken (icons will stretch to 100% and ignore the cover method). Split styles for .ibo-panel--icon-img vs .ibo-panel--icon-background and use object-fit/object-position (and appropriate zoomout handling) for the <img> variant.

Copilot uses AI. Check for mistakes.

.ibo-panel--title {
Expand Down
28 changes: 15 additions & 13 deletions css/backoffice/components/_title.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@ $ibo-title--icon--size: 90px !default;
$ibo-title--icon--size-2: 80px !default;
$ibo-title--icon--size-3: 70px !default;

$ibo-title--icon-background--size--must-contain: contain !default;
$ibo-title--icon-background--size--must-cover: cover !default;
$ibo-title--icon-background--size--must-zoomout: 66.67% !default;
$ibo-title--icon-img--size--must-contain: contain !default;
$ibo-title--icon-img--size--must-cover: cover !default;
$ibo-title--icon-img--size--must-zoomout: 66.67% !default;
$ibo-title--icon-background--size--must-contain: $ibo-title--icon-img--size--must-contain; // deprecated, to be removed in favor of $ibo-title--icon-img--size--must-contain
$ibo-title--icon-background--size--must-cover: $ibo-title--icon-img--size--must-cover; // deprecated, to be removed in favor of $ibo-title--icon-img--size--must-cover
$ibo-title--icon-background--size--must-zoomout: $ibo-title--icon-img--size--must-zoomout; // deprecated, to be removed in favor of $ibo-title--icon-img--size--must-zoomout


.ibo-title {
Expand Down Expand Up @@ -44,24 +47,23 @@ $ibo-title--icon-background--size--must-zoomout: 66.67% !default;
min-height: $ibo-title--icon--size-3;
}

.ibo-title--icon-background {
.ibo-title--icon-img, .ibo-title--icon-background { // second class is deprecated
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: $ibo-title--icon-background--size--must-contain;
object-position: center;
background-size: $ibo-title--icon-img--size--must-contain;
}
Copy link

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.ibo-title--icon-background is still rendered as a <div> with background-image (see templates/base/components/title/layout.html.twig), but the updated rules removed background-position: center and background-repeat: no-repeat. This will cause title icons to tile and/or be misaligned. Restore the background positioning/repeat rules for the background-based implementation (and only use object-* rules for a real <img> implementation).

Copilot uses AI. Check for mistakes.

.ibo-title--icon-background--must-contain {
background-size: $ibo-title--icon-background--size--must-contain;
.ibo-title--icon-img--must-contain, .ibo-title--icon-background--must-contain { // second class is deprecated
background-size: $ibo-title--icon-img--size--must-contain;
}

.ibo-title--icon-background--must-cover {
background-size: $ibo-title--icon-background--size--must-cover;
.ibo-title--icon-img--must-cover, .ibo-title--icon-background--must-cover { // second class is deprecated
background-size: $ibo-title--icon-img--size--must-cover;
}

.ibo-title--icon-background--must-zoomout {
background-size: $ibo-title--icon-background--size--must-zoomout;
.ibo-title--icon-img--must-zoomout, .ibo-title--icon-background--must-zoomout { // second class is deprecated
background-size: $ibo-title--icon-img--size--must-zoomout;
}

.ibo-title--for-object-details {
Expand Down
25 changes: 25 additions & 0 deletions sources/Application/UI/Base/Layout/UIContentBlock.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ class UIContentBlock extends UIBlock implements iUIContentBlock
protected $aDeferredBlocks;
/** @var bool If set to true, the content block will have a surrounding <div> no matter its options / CSS classes / ... */
protected $bHasForcedDiv;
/** @var bool if set to true, the icon will be lazy loaded
* @since 3.2.3
*/
protected bool $bHasLazyLoadIcon;

/**
* UIContentBlock constructor.
Expand All @@ -48,6 +52,7 @@ public function __construct(string $sId = null, array $aContainerClasses = [])
$this->aSubBlocks = [];
$this->aDeferredBlocks = [];
$this->bHasForcedDiv = false;
$this->bHasLazyLoadIcon = false;
$this->SetCSSClasses($aContainerClasses);
}

Expand Down Expand Up @@ -220,4 +225,24 @@ public function SetHasForcedDiv(bool $bHasForcedDiv)
$this->bHasForcedDiv = $bHasForcedDiv;
return $this;
}

/**
* @see static::$bHasLazyLoadIcon
* @return bool
*/
public function HasLazyLoadIcon(): bool
{
return $this->bHasLazyLoadIcon;
}

/**
* @see static::$bHasLazyLoadIcon
* @param bool $bLazyLoadIcon
* @return $this
*/
public function SetHasLazyLoadIcon(bool $bLazyLoadIcon)
{
$this->bHasLazyLoadIcon = $bLazyLoadIcon;
return $this;
}
}
7 changes: 1 addition & 6 deletions sources/Controller/Newsroom/iTopNewsroomController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,11 @@
use Combodo\iTop\Application\TwigBase\Controller\Controller;
use Combodo\iTop\Application\UI\Base\Component\Button\Button;
use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroupUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Html\Html;
use Combodo\iTop\Application\UI\Base\Component\Input\InputUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Input\Toggler;
use Combodo\iTop\Application\UI\Base\Component\Panel\Panel;
use Combodo\iTop\Application\UI\Base\Component\Panel\PanelUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
use Combodo\iTop\Application\UI\Base\Component\Title\TitleUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Toolbar\ToolbarUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Layout\Object\ObjectSummary;
Expand All @@ -29,13 +26,10 @@
use DBObjectSearch;
use DBObjectSet;
use Dict;
use JSPopupMenuItem;
use MetaModel;
use SecurityException;
use URLPopupMenuItem;
use UserRights;
use utils;
use appUserPreferences;

/**
* Class iTopNewsroomController
Expand Down Expand Up @@ -376,6 +370,7 @@ classes: ['ibo-is-danger']
$sReadColor = $oEvent->Get('read') === 'no' ? 'ibo-notifications--view-all--item--unread' : 'ibo-notifications--view-all--item--read';
$sReadLabel = $oEvent->Get('read') === 'no' ? Dict::S('UI:Newsroom:iTopNotification:ViewAllPage:Unread:Label') : Dict::S('UI:Newsroom:iTopNotification:ViewAllPage:Read:Label');
$oEventBlock = new ObjectSummary($oEvent);
$oEventBlock->SetHasLazyLoadIcon(true);
$oEventBlock->SetCSSColorClass($sReadColor);
$oEventBlock->SetSubTitle($sReadLabel);
$oEventBlock->SetClassLabel('');
Expand Down
5 changes: 4 additions & 1 deletion templates/base/components/panel/layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@
{% if oUIBlock.HasIcon() %}
<div class="ibo-panel--icon" data-role="ibo-panel--icon">
{% block iboPanelIcon %}
<div class="ibo-panel--icon-background ibo-panel--icon-background--must-{{ oUIBlock.GetIconCoverMethod() }}" data-role="ibo-panel--icon-background" style="background-image: url('{{ oUIBlock.GetIconUrl()|raw }}');"></div>
<img class="ibo-panel--icon-background ibo-panel--icon-img--must-{{ oUIBlock.GetIconCoverMethod() }}
ibo-panel--icon-background--must-{{ oUIBlock.GetIconCoverMethod() }}"
{% if oUIBlock.HasLazyLoadIcon %} loading="lazy" {% endif %}
data-role="ibo-panel--icon-img" src="{{ oUIBlock.GetIconUrl()|raw }}" alt="" aria-hidden="true">
{% endblock %}
</div>
{% endif %}
Expand Down