From 975e3003bff415c8c80e3e944c35e2dfe74b7d08 Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Fri, 1 May 2026 10:47:16 -0700
Subject: [PATCH] feat: improve feed, connections, and contributors, rendering
 performance

---
 .../SimilarCardsContainer.tsx                 |  9 +++++-
 .../CollectionContributorsContainer.tsx       | 30 ++++++++++++-------
 .../ConnectionsContainer.tsx                  | 28 ++++++++++-------
 .../myFeedContainer/MyFeedContainer.tsx       | 25 ++++++++++------
 4 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/src/webapp/features/cards/containers/similarCardsContainer/SimilarCardsContainer.tsx b/src/webapp/features/cards/containers/similarCardsContainer/SimilarCardsContainer.tsx
index f2c66159..5c3670de 100644
--- a/src/webapp/features/cards/containers/similarCardsContainer/SimilarCardsContainer.tsx
+++ b/src/webapp/features/cards/containers/similarCardsContainer/SimilarCardsContainer.tsx
@@ -48,7 +48,14 @@ export default function SimilarCardsContainer(props: Props) {
         ) : (
           <Grid gap="sm" mx={'auto'} maw={600} w={'100%'}>
             {allSimilarUrls.map((urlView) => (
-              <Grid.Col key={urlView.url} span={12}>
+              <Grid.Col
+                key={urlView.url}
+                span={12}
+                style={{
+                  contentVisibility: 'auto',
+                  containIntrinsicSize: 'auto 300px',
+                }}
+              >
                 <SimilarUrlCard
                   urlView={urlView}
                   analyticsContext={{
diff --git a/src/webapp/features/collections/containers/collectionContributorsContainer/CollectionContributorsContainer.tsx b/src/webapp/features/collections/containers/collectionContributorsContainer/CollectionContributorsContainer.tsx
index a6300ca3..46678319 100644
--- a/src/webapp/features/collections/containers/collectionContributorsContainer/CollectionContributorsContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionContributorsContainer/CollectionContributorsContainer.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Container, Stack, Text, Center, Badge } from '@mantine/core';
+import { Box, Container, Stack, Text, Center, Badge } from '@mantine/core';
 import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
 import useCollectionContributors from '../../lib/queries/useCollectionContributors';
 import ProfileCard from '@/features/profile/components/profileCard/ProfileCard';
@@ -34,16 +34,24 @@ export default function CollectionContributorsContainer(props: Props) {
           >
             <Stack gap={'xs'}>
               {allUsers.map((user) => (
-                <ProfileCard key={user.id} profile={user}>
-                  {user.contributionCount && (
-                    <Badge variant="light" color="blue">
-                      {user.contributionCount}{' '}
-                      {user.contributionCount === 1
-                        ? 'Contribution'
-                        : 'Contributions'}
-                    </Badge>
-                  )}
-                </ProfileCard>
+                <Box
+                  key={user.id}
+                  style={{
+                    contentVisibility: 'auto',
+                    containIntrinsicSize: 'auto 80px',
+                  }}
+                >
+                  <ProfileCard profile={user}>
+                    {user.contributionCount && (
+                      <Badge variant="light" color="blue">
+                        {user.contributionCount}{' '}
+                        {user.contributionCount === 1
+                          ? 'Contribution'
+                          : 'Contributions'}
+                      </Badge>
+                    )}
+                  </ProfileCard>
+                </Box>
               ))}
             </Stack>
           </InfiniteScroll>
diff --git a/src/webapp/features/connections/containers/connectionsContainer/ConnectionsContainer.tsx b/src/webapp/features/connections/containers/connectionsContainer/ConnectionsContainer.tsx
index bded0ac4..d7e804f5 100644
--- a/src/webapp/features/connections/containers/connectionsContainer/ConnectionsContainer.tsx
+++ b/src/webapp/features/connections/containers/connectionsContainer/ConnectionsContainer.tsx
@@ -4,7 +4,7 @@ import useForwardConnections from '@/features/connections/lib/queries/useForward
 import useBackwardConnections from '@/features/connections/lib/queries/useBackwardConnections';
 import useAllConnections from '@/features/connections/lib/queries/useAllConnections';
 import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
-import { Grid, Group, Stack } from '@mantine/core';
+import { Box, Grid, Group, Stack } from '@mantine/core';
 import ConnectionsContainerError from './Error.ConnectionsContainer';
 import ConnectionItem from '@/features/connections/components/connectionItem/ConnectionItem';
 import SembleEmptyTab from '@/features/semble/components/sembleEmptyTab/SembleEmptyTab';
@@ -170,15 +170,23 @@ export default function ConnectionsContainer(props: Props) {
                   : connection.source.url;
 
                 return (
-                  <Grid.Col key={`${direction}-${index}`} span={12}>
-                    <ConnectionItem
-                      connection={connection}
-                      direction={connectionDirection}
-                      onEdit={() => {
-                        handleOpenEditModal(connection.connection, targetUrl);
-                      }}
-                    />
-                  </Grid.Col>
+                  <Box
+                    key={`${direction}-${index}`}
+                    style={{
+                      contentVisibility: 'auto',
+                      containIntrinsicSize: 'auto 200px',
+                    }}
+                  >
+                    <Grid.Col span={12}>
+                      <ConnectionItem
+                        connection={connection}
+                        direction={connectionDirection}
+                        onEdit={() => {
+                          handleOpenEditModal(connection.connection, targetUrl);
+                        }}
+                      />
+                    </Grid.Col>
+                  </Box>
                 );
               })}
             </Grid>
diff --git a/src/webapp/features/feeds/containers/myFeedContainer/MyFeedContainer.tsx b/src/webapp/features/feeds/containers/myFeedContainer/MyFeedContainer.tsx
index a2efe992..dd37e023 100644
--- a/src/webapp/features/feeds/containers/myFeedContainer/MyFeedContainer.tsx
+++ b/src/webapp/features/feeds/containers/myFeedContainer/MyFeedContainer.tsx
@@ -115,17 +115,24 @@ export default function MyFeedContainer() {
           <Stack gap={'xl'} mx={'auto'} maw={600} w={'100%'}>
             <Stack gap={60}>
               {allActivities.map((item) => (
-                <FeedItem
+                <Box
                   key={item.id}
-                  item={item}
-                  analyticsContext={{
-                    saveSource: CardSaveSource.FEED,
-                    activeFilters: {
-                      urlType: selectedUrlType,
-                    },
-                    pagePath: pathname,
+                  style={{
+                    contentVisibility: 'auto',
+                    containIntrinsicSize: 'auto 400px',
                   }}
-                />
+                >
+                  <FeedItem
+                    item={item}
+                    analyticsContext={{
+                      saveSource: CardSaveSource.FEED,
+                      activeFilters: {
+                        urlType: selectedUrlType,
+                      },
+                      pagePath: pathname,
+                    }}
+                  />
+                </Box>
               ))}
             </Stack>
           </Stack>
-- 
2.51.2