Lazy load images

templates/category.html.twig

@@ -11,6 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       </a>
       {% if category.icon is not null %}
         <img width="36" height="36" src="{{ asset('icons/categories/' ~ category.icon) }}"
+             {% if lazy %}
+               loading="lazy"
+             {% endif %}
              alt="{{ category.name }}" title="{{ category.name }}"/>
       {% endif %}
     {% else %}
@@ -30,6 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             <div>
               <a href="{{ path('app_main_application_intl', {'_locale': locale, 'category': category.name | lower, 'application' : application.id }) }}">
                 <img width="48" height="48" src="{{ asset('icons/' ~ application.icon) }}"
+                     loading="lazy"
                      alt="{{ application.name | l10n(locale) }}" title="{{ application.name | l10n(locale) }}"/>
               </a>
             </div>

templates/main/category.html.twig

@@ -18,6 +18,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         KDE's Applications</a> {{ category.name | capitalize | trans }}
     </h1>
 
-    {% include 'category.html.twig' %}
+    {% include 'category.html.twig' with {'lazy': false} %}
   </main>
 {% endblock %}

templates/main/index.html.twig

@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     </div>
 
     {% for category in categories %}
-      {% include 'category.html.twig' %}
+      {% include 'category.html.twig' with {'lazy': (not loop.first)} %}
     {% endfor %}
   </main>
 {% endblock %}