Add pagination to `Profile > Groups` page on User Profile

Problem

Several pages listing groups and projects do not have pagination and thus are experiencing long loading times for organizations that contains a lot of groups and projects.

This is the case for:

• Profile > Groups, for example: https://gitlab.com/users/lohrc/groups. This is what this issue should focus on. See also duplicate, closed issue: #429706 (closed)
• Profile > Contributed projects, for example: https://gitlab.com/users/lohrc/contributed. This can be tackled separately in #15539 (closed).

The other pages tend to have shorter loading times as users don't usually generate hundreds of personal or starred projects.

Implementation Guide

For contributed projects, the view file already has support for pagination built in, we were just missing the code to apply pagination strategy to the list of contributed projects we have in the controller.

For groups, pagination wasn't supported yet in views, I have now added it.

I was able to get both contributed and groups page paginated.

diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 88a8851607b2..9d4b3ff6ec51 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -249,7 +249,7 @@ def load_projects
   end
 
   def load_contributed_projects
-    @contributed_projects = contributed_projects.joined(user)
+    @contributed_projects = contributed_projects.joined(user).page(params[:page]).per(3)
 
     prepare_projects_for_rendering(@contributed_projects)
   end
@@ -261,7 +261,7 @@ def load_starred_projects
   end
 
   def load_groups
-    @groups = JoinedGroupsFinder.new(user).execute(current_user)
+    @groups = JoinedGroupsFinder.new(user).execute(current_user).page(params[:page]).per(3)
 
     prepare_groups_for_rendering(@groups)
   end
diff --git a/app/views/shared/groups/_list.html.haml b/app/views/shared/groups/_list.html.haml
index 550f079bf3b1..6a1a6f5b6d6a 100644
--- a/app/views/shared/groups/_list.html.haml
+++ b/app/views/shared/groups/_list.html.haml
@@ -4,6 +4,7 @@
 - primary_button_label = _('New group')
 - primary_button_link = new_group_path
 - visitor_empty_message = s_('GroupsEmptyState|No groups found')
+- remote = false unless local_assigns[:remote] == true
 
 - if groups.any?
   - user = local_assigns[:user]
@@ -11,6 +12,7 @@
   %ul.content-list
     - groups.each_with_index do |group, i|
       = render "shared/groups/group", group: group, user: user
+  = paginate_collection(groups, remote: remote)
 - else
   = render partial: 'shared/empty_states/profile_tabs', locals: { illustration_path: illustration_path,
     current_user_empty_message_header: current_user_empty_message_header,

Note: The per(3) in the diff is just used an example to show 3 objects per page, we can remove it and it will paginate at the default of 20 per page.