From 57af283eeb89b4f929f6cce8bae90f0ea172f12c Mon Sep 17 00:00:00 2001
From: Pierre-Yves Chibon <pingou@pingoured.fr>
Date: Nov 17 2020 09:41:08 +0000
Subject: Only show the subscribers list on demand


This will speed up the page loading as the images will only be loaded
on demand and not on page load, which for issues/PRs with lots of people
subscribed will have quite a performance impact.

Fixes https://pagure.io/pagure/issue/5012

Signed-off-by: Pierre-Yves Chibon <pingou@pingoured.fr>

---

diff --git a/pagure/templates/issue.html b/pagure/templates/issue.html
index 2e5c51d..f3c619d 100644
--- a/pagure/templates/issue.html
+++ b/pagure/templates/issue.html
@@ -590,6 +590,9 @@ namespace=repo.namespace, repo=repo.name, issueid=issueid)
           <div class="py-2 text-uppercase font-size-09">
             Subscribers
             <span class="badge badge-secondary badge-pill font-size-09 ml-1" id="subscribers-count">{{subscribers|count}}</span>
+            <span id="subscribers-toggle" title="Show/Hide subscribers">
+              <span class="fa fa-arrow-circle-down fa-fw fa-1x"></span>
+            </span>
           </div>
           <div class="ml-auto">
               <a href="#" class="btn btn-sm btn-link" id="subcribe-btn"
@@ -603,11 +606,11 @@ namespace=repo.namespace, repo=repo.name, issueid=issueid)
         </h5>
 
         {% if subscribers %}
-        <div id="subscribers_list" class="p-2">
+        <div id="subscribers_list" class="p-2 hidden">
         {% for subscriber in subscribers %}
             <a href="{{ url_for('ui_ns.view_user', username=subscriber)
             }}" title="{{ subscriber }}" id="sub-avatar-{{subscriber}}">{{
-              subscriber |avatar(size=30, css_class="pb-1") | safe
+              subscriber |avatar(size=30, css_class="pb-1", src_tag="data-src") | safe
             }}</a>
         {% endfor %}
         </div>
@@ -816,6 +819,16 @@ $(document).ready(function() {
     return false;
   };
 
+  $('#subscribers-toggle').click(function(event){
+    var _el = $('#subscribers_list');
+    if (! _el.is(':visible')){
+      $('#subscribers-toggle').html('<span class="fa fa-arrow-circle-up fa-fw fa-1x">');
+    } else {
+      $('#subscribers-toggle').html('<span class="fa fa-arrow-circle-down fa-fw fa-1x">');
+    }
+    _el.toggle();
+  });
+
   {% if g.repo_user %}
   $('#closeticket').click(function(event){
     event.preventDefault();
diff --git a/pagure/templates/repo_pull_request.html b/pagure/templates/repo_pull_request.html
index ce1562b..8e53c2d 100644
--- a/pagure/templates/repo_pull_request.html
+++ b/pagure/templates/repo_pull_request.html
@@ -626,6 +626,9 @@
               <div class="py-2 text-uppercase font-size-09">
                 Subscribers
                 <span class="badge badge-secondary badge-pill font-size-09 ml-1" id="subscribers-count">{{subscribers|count}}</span>
+                <span title="Show/Hide subscribers" id="subscribers-toggle">
+                  <span class="fa fa-arrow-circle-down fa-fw fa-1x"</span>
+                </span>
               </div>
               <div class="ml-auto">
                   <a href="#" class="btn btn-sm btn-link" id="subcribe-btn"
@@ -637,13 +640,13 @@
                 </a>
                 </div>
             </h5>
-              {% if subscribers %}
 
-            <div id="subscribers_list" class="p-2">
+            {% if subscribers %}
+            <div id="subscribers_list" class="p-2 hidden">
             {% for subscriber in subscribers %}
                 <a href="{{ url_for('ui_ns.view_user', username=subscriber)
                 }}" title="{{ subscriber }}" id="sub-avatar-{{subscriber}}">{{
-                  subscriber |avatar(size=30, css_class="pb-1") | safe
+                  subscriber |avatar(size=30, css_class="pb-1", src_tag="data-src") | safe
                 }}</a>
             {% endfor %}
 
@@ -891,6 +894,16 @@ var statusesLabels = {{ flag_statuses_labels|safe }}
 
 $(document).ready(function() {
 
+  $('#subscribers-toggle').click(function(event){
+    var _el = $('#subscribers_list');
+    if (! _el.is(':visible')){
+      $('#subscribers-toggle').html('<span class="fa fa-arrow-circle-up fa-fw fa-1x">');
+    } else {
+      $('#subscribers-toggle').html('<span class="fa fa-arrow-circle-down fa-fw fa-1x">');
+    }
+    _el.toggle();
+  });
+
   {# Show latest tag #}
   {% if pull_request.commit_stop %};
     var url = '{{ url_for("api_ns.api_commit_flags",
@@ -981,7 +994,6 @@ $(document).ready(function() {
     });
   });
 
-
   $('#merge_btn').click(function() {
       return confirm('Confirm merging this pull-request');
   });
@@ -1485,7 +1497,7 @@ $(document).ready(function () {
             _countlabel.text(_count+1)
             var _html = '<a href="/user/' + data.user + '"'
                       + 'title="'+data.user+'" id="sub-avatar-'+data.user+'">'
-                      + '<img src="'+data.avatar_url+'" class="pb-1"></a>';
+                      + '<img src="'+data.avatar_url+'" class="pb-1 lazyload"></a>';
             $('#subscribers_list').prepend(_html);
           } else {
             _btn.text('Subscribe');
diff --git a/pagure/ui/filters.py b/pagure/ui/filters.py
index 55a2ca0..282f523 100644
--- a/pagure/ui/filters.py
+++ b/pagure/ui/filters.py
@@ -500,7 +500,7 @@ def text_wraps(text, size=10):
 
 
 @UI_NS.app_template_filter("avatar")
-def avatar(packager, size=64, css_class=None):
+def avatar(packager, size=64, css_class=None, src_tag="src"):
     """ Template filter that returns html for avatar of any given Username.
     """
     if not isinstance(packager, six.text_type):
@@ -515,8 +515,9 @@ def avatar(packager, size=64, css_class=None):
     if css_class:
         class_string = class_string + " " + css_class
 
-    output = '<img class="%s" src="%s"/>' % (
+    output = '<img class="%s lazyload" %s="%s"/>' % (
         class_string,
+        src_tag,
         avatar_url(packager, size),
     )