[CH] Disable server statuses streaming when on small devices as it can disturb user navigation (#128)

app/soapbox/features/community_timeline/index.tsx

@@ -6,11 +6,10 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column } from 'soapbox/components/ui';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
+import { isMobile } from 'soapbox/is_mobile';
 
 import Timeline from '../ui/components/timeline';
 
-import ColumnSettings from './containers/column_settings_container';
-
 const messages = defineMessages({
   title: { id: 'column.community', defaultMessage: 'Local timeline' },
 });
@@ -34,11 +33,13 @@ const CommunityTimeline = () => {
 
   useEffect(() => {
     dispatch(expandCommunityTimeline({ onlyMedia } as any));
-    const disconnect = dispatch(connectCommunityStream({ onlyMedia } as any));
+    if (!isMobile(window.innerWidth)) {
+      const disconnect = dispatch(connectCommunityStream({ onlyMedia } as any));
 
-    return () => {
-      disconnect();
-    };
+      return () => {
+        disconnect();
+      };
+    }
   }, [onlyMedia]);
 
   return (

app/soapbox/features/home_timeline/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
@@ -21,9 +21,6 @@ const HomeTimeline: React.FC = () => {
   const dispatch = useAppDispatch();
   const features = useFeatures();
 
-  const polling = useRef<NodeJS.Timer | null>(null);
-
-  const isPartial = useAppSelector(state => state.timelines.get('home')?.isPartial === true);
   const currentAccountId = useAppSelector(state => state.timelines.get('home')?.feedAccountId as string | undefined);
   const siteTitle = useAppSelector(state => state.instance.title);
   const currentAccountRelationship = useAppSelector(state => currentAccountId ? state.relationships.get(currentAccountId) : null);
@@ -32,37 +29,10 @@ const HomeTimeline: React.FC = () => {
     dispatch(expandHomeTimeline({ maxId, accountId: currentAccountId }));
   };
 
-  // Mastodon generates the feed in Redis, and can return a partial timeline
-  // (HTTP 206) for new users. Poll until we get a full page of results.
-  const checkIfReloadNeeded = () => {
-    if (isPartial) {
-      polling.current = setInterval(() => {
-        dispatch(expandHomeTimeline());
-      }, 3000);
-    } else {
-      stopPolling();
-    }
-  };
-
-  const stopPolling = () => {
-    if (polling.current) {
-      clearInterval(polling.current);
-      polling.current = null;
-    }
-  };
-
   const handleRefresh = () => {
     return dispatch(expandHomeTimeline({ maxId: null, accountId: currentAccountId }));
   };
 
-  useEffect(() => {
-    checkIfReloadNeeded();
-
-    return () => {
-      stopPolling();
-    };
-  }, [isPartial]);
-
   useEffect(() => {
     // Check to see if we still follow the user that is selected in the Feed Carousel.
     if (currentAccountId) {

app/soapbox/features/public_timeline/index.tsx

@@ -8,6 +8,7 @@ import { expandPublicTimeline, expandBubbleTimeline } from 'soapbox/actions/time
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Button, Column, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useSettings, useFeatures } from 'soapbox/hooks';
+import { isMobile } from 'soapbox/is_mobile';
 
 import PinnedHostsPicker from '../remote_timeline/components/pinned_hosts_picker';
 import Timeline from '../ui/components/timeline';
@@ -38,7 +39,7 @@ const CommunityTimeline = () => {
   }, [dispatch]);
 
   const handleLoadMore = React.useCallback((maxId: string) => {
-    if(!bubbleTimeline) {
+    if (!bubbleTimeline) {
       dispatch(expandPublicTimeline({ maxId, onlyMedia }));
     } else {
       dispatch(expandBubbleTimeline({ maxId, onlyMedia }));
@@ -46,7 +47,7 @@ const CommunityTimeline = () => {
   }, [bubbleTimeline, dispatch, onlyMedia]);
 
   const handleRefresh = React.useCallback(() => {
-    if(!bubbleTimeline) {
+    if (!bubbleTimeline) {
       return dispatch(expandPublicTimeline({ onlyMedia } as any));
     } else {
       return dispatch(expandBubbleTimeline({ onlyMedia } as any));
@@ -54,13 +55,15 @@ const CommunityTimeline = () => {
   }, [bubbleTimeline, dispatch, onlyMedia]);
 
   useEffect(() => {
-    if(!bubbleTimeline) {
+    if (!bubbleTimeline) {
       dispatch(expandPublicTimeline({ onlyMedia } as any));
-      const disconnect = dispatch(connectPublicStream({ onlyMedia }));
+      if (!isMobile(window.innerWidth)) {
+        const disconnect = dispatch(connectPublicStream({ onlyMedia }));
 
-      return () => {
-        disconnect();
-      };
+        return () => {
+          disconnect();
+        };
+      }
     } else {
       dispatch(expandBubbleTimeline({ onlyMedia } as any));
       // bubble timeline doesnt have streaming for now
@@ -71,37 +74,37 @@ const CommunityTimeline = () => {
     <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <PinnedHostsPicker />
       {showExplanationBox && <div className='mb-4'>
-          <Text size="lg" weight="bold" className="mb-2">
-            <FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />
-          </Text>
-          <FormattedMessage
-            id='fediverse_tab.explanation_box.explanation'
-            defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don&apos;t like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
-            values={{
-              site_title: siteTitle,
-              local: (
-                <Link to='/timeline/local'>
-                  <FormattedMessage
-                    id='empty_column.home.local_tab'
-                    defaultMessage='the {site_title} tab'
-                    values={{ site_title: siteTitle }}
-                  />
-                </Link>
-              ),
-            }}
-          />
-          {
-            bubbleTimeline && (
-              <p className='mt-2'>
-                <FormattedMessage id='fediverse_tab.explanation_box.bubble' defaultMessage='This timeline shows you all the statuses published on a selection of other instances curated by your moderators.' />
-              </p>
-            )
-          }
-          <div className="text-right">
-            <Button theme="link" onClick={dismissExplanationBox}>
-              <FormattedMessage id='fediverse_tab.explanation_box.dismiss' defaultMessage="Don\'t show again" />
-            </Button>
-          </div>
+        <Text size='lg' weight='bold' className='mb-2'>
+          <FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />
+        </Text>
+        <FormattedMessage
+          id='fediverse_tab.explanation_box.explanation'
+          defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don&apos;t like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
+          values={{
+            site_title: siteTitle,
+            local: (
+              <Link to='/timeline/local'>
+                <FormattedMessage
+                  id='empty_column.home.local_tab'
+                  defaultMessage='the {site_title} tab'
+                  values={{ site_title: siteTitle }}
+                />
+              </Link>
+            ),
+          }}
+        />
+        {
+          bubbleTimeline && (
+            <p className='mt-2'>
+              <FormattedMessage id='fediverse_tab.explanation_box.bubble' defaultMessage='This timeline shows you all the statuses published on a selection of other instances curated by your moderators.' />
+            </p>
+          )
+        }
+        <div className='text-right'>
+          <Button theme='link' onClick={dismissExplanationBox}>
+            <FormattedMessage id='fediverse_tab.explanation_box.dismiss' defaultMessage="Don\'t show again" />
+          </Button>
+        </div>
       </div>}
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline