Avoid loading user activity calendar on mobile

Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

app/assets/javascripts/pages/users/user_tabs.js

 import $ from 'jquery';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import axios from '~/lib/utils/axios_utils';
 import Activities from '~/activities';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
@@ -209,7 +210,7 @@ export default class UserTabs {
 
   loadActivityCalendar() {
     const $calendarWrap = this.$parentEl.find('.tab-pane.active .user-calendar');
-    if (!$calendarWrap.length) return;
+    if (!$calendarWrap.length || bp.getBreakpointSize() === 'xs') return;
 
     const calendarPath = $calendarWrap.data('calendarPath');
 

changelogs/unreleased/201743-avoid-loading-user-activity-calendar-data-on-mobile.yml

+---
+title: Avoid loading user activity calendar on mobile
+merge_request: 24277
+author: Takuya Noguchi
+type: fixed

spec/features/calendar_spec.rb

@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 describe 'Contributions Calendar', :js do
+  include MobileHelpers
+
   let(:user) { create(:user) }
   let(:contributed_project) { create(:project, :public, :repository) }
   let(:issue_note) { create(:note, project: contributed_project) }
@@ -122,15 +124,15 @@ describe 'Contributions Calendar', :js do
     end
   end
 
-  describe 'calendar daily activities' do
-    shared_context 'visit user page' do
-      before do
-        visit user.username
-        page.find('.js-overview-tab a').click
-        wait_for_requests
-      end
+  shared_context 'visit user page' do
+    before do
+      visit user.username
+      page.find('.js-overview-tab a').click
+      wait_for_requests
     end
+  end
 
+  describe 'calendar daily activities' do
     shared_examples 'a day with activity' do |contribution_count:|
       include_context 'visit user page'
 
@@ -199,4 +201,22 @@ describe 'Contributions Calendar', :js do
       end
     end
   end
+
+  describe 'on smaller screens' do
+    shared_examples 'hidden activity calendar' do
+      include_context 'visit user page'
+
+      it 'hides the activity calender' do
+        expect(find('#js-overview')).not_to have_css('.js-contrib-calendar')
+      end
+    end
+
+    context 'size xs' do
+      before do
+        resize_screen_xs
+      end
+
+      it_behaves_like 'hidden activity calendar'
+    end
+  end
 end