Fixed Fix layout shift on member pages if profile posts are disabled

Steffen

Well-known member
Affected version
2.2.7
If profile posts are disabled (or in accessible) then there is layout shift on member pages caused by the lazy-loading of the tab "Latest Activity". Can you please fix this? These are the only remaining pages on our whole website without "good" web vitals according to the Google Search Console.

The following patch populates the latest activity tab without lazy-loading (but only if profile posts are disabled, of course).

Diff:
diff --git a/src/XF/Pub/Controller/Member.php b/src/XF/Pub/Controller/Member.php
--- a/src/XF/Pub/Controller/Member.php
+++ b/src/XF/Pub/Controller/Member.php
@@ -356,6 +356,29 @@ class Member extends AbstractController
             $attachmentData = null;
         }
 
+        if ($user->canViewLatestActivity() && !$user->canViewPostsOnProfile())
+        {
+            $maxItems = $this->options()->newsFeedMaxItems;
+
+            $newsFeedRepo = $this->repository('XF:NewsFeed');
+
+            $newsFeedFinder = $newsFeedRepo->findMembersActivity($user);
+
+            $newsFeed = $newsFeedFinder->fetch($maxItems * 2);
+            $newsFeedRepo->addContentToNewsFeedItems($newsFeed);
+
+            $newsFeed = $newsFeed->filterViewable();
+            $newsFeed = $newsFeed->slice(0, $maxItems);
+
+            $newsFeedItems = $newsFeed;
+            $newsFeedOldestItemId = $newsFeed->count() ? min(array_keys($newsFeed->toArray())) : 0;
+        }
+        else
+        {
+            $newsFeedItems = [];
+            $newsFeedOldestItemId = 0;
+        }
+
        $viewParams = [
            'user' => $user,

@@ -376,6 +399,9 @@ class Member extends AbstractController
             'attachmentData' => $attachmentData,
             'canViewAttachments' => $canViewAttachments,
             'profilePostAttachData' => $profilePostAttachData,
+
+            'newsFeedItems' => $newsFeedItems,
+            'newsFeedOldestItemId' => $newsFeedOldestItemId,
         ];
         return $this->view('XF:Member\View', 'member_view', $viewParams);
     }
diff --git a/src/addons/XF/_data/templates.xml b/src/addons/XF/_data/templates.xml
--- a/src/addons/XF/_data/templates.xml
+++ b/src/addons/XF/_data/templates.xml
@@ -58209,11 +58209,18 @@ body.compensate-for-scrollbar
                 </xf:if>
 
                 <xf:if is="$user.canViewLatestActivity()">
-                    <a href="{{ link('members/latest-activity', $user) }}"
-                        rel="nofollow"
-                        class="tabs-tab"
-                        id="latest-activity"
-                        role="tab">{{ phrase('latest_activity') }}</a>
+                    <xf:if is="!$user->canViewPostsOnProfile()">
+                        <a href="{{ link('members', $user) }}"
+                            class="tabs-tab is-active"
+                            role="tab"
+                            aria-controls="latest-activity">{{ phrase('latest_activity') }}</a>
+                    <xf:else />
+                        <a href="{{ link('members/latest-activity', $user) }}"
+                            rel="nofollow"
+                            class="tabs-tab"
+                            id="latest-activity"
+                            role="tab">{{ phrase('latest_activity') }}</a>
+                    </xf:if>
                 </xf:if>
 
                 <a href="{{ link('members/recent-content', $user) }}"
@@ -58305,9 +58312,43 @@ body.compensate-for-scrollbar
     </xf:if>
 
     <xf:if is="$user.canViewLatestActivity()">
-        <li data-href="{{ link('members/latest-activity', $user) }}" role="tabpanel" aria-labelledby="latest-activity">
-            <div class="blockMessage">{{ phrase('loading...') }}</div>
-        </li>
+        <xf:if is="!$user->canViewPostsOnProfile()">
+            <li class="is-active" role="tabpanel" id="latest-activity">
+                <div class="block">
+                    <div class="block-container">
+                        <xf:if is="$newsFeedItems is not empty">
+                            <ul class="block-body js-newsFeedTarget">
+                                <xf:foreach loop="$newsFeedItems" value="$item">
+                                    <xf:macro template="news_feed_macros" name="feed_row" arg-item="{$item}" />
+                                </xf:foreach>
+                            </ul>
+                            <div class="block-footer js-newsFeedLoadMore">
+                                <span class="block-footer-controls"><xf:button href="{{ link('members/latest-activity', $user, {'before_id': $newsFeedOldestItemId}) }}"
+                                    data-xf-click="inserter"
+                                    data-append=".js-newsFeedTarget"
+                                    data-replace=".js-newsFeedLoadMore">
+                                    {{ phrase('show_older_items') }}
+                                </xf:button></span>
+                            </div>
+                        <xf:else />
+                            <div class="block-body js-newsFeedTarget">
+                                <div class="block-row">{{ phrase('news_feed_is_currently_empty') }}</div>
+                            </div>
+                        </xf:if>
+                    </div>
+
+                    <div class="block-outer block-outer--after">
+                        <div class="block-outer-opposite">
+                            <xf:showignored />
+                        </div>
+                    </div>
+                </div>
+            </li>
+        <xf:else />
+            <li data-href="{{ link('members/latest-activity', $user) }}" role="tabpanel" aria-labelledby="latest-activity">
+                <div class="blockMessage">{{ phrase('loading...') }}</div>
+            </li>
+        </xf:if>
     </xf:if>
 
     <li data-href="{{ link('members/recent-content', $user) }}" role="tabpanel" aria-labelledby="recent-content">
 
Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.2.8).

Change log:
Fix layout shift when profile posts not visible on user profiles.
There may be a delay before changes are rolled out to the XenForo Community.
 
Top Bottom