Just always show homepage segment titles.. (#1116)

## Issue
- "Following" was showing up in place of "Featured"
- "Following" doesn't appear until livestreams are fetched, causing shifts.

When "Upcoming Livestreams" was implemented, it was trying to retain the original behavior of not showing "Following" title if that was the first in the list.

Not only is it a chicken-and-egg problem, but it causes extra renders due to the need to check if the other guys was rendered.

With FYP, there are now more combinations to handle.

## Change
Just show the title...

ui/component/recommendedPersonal/view.jsx

@@ -72,7 +72,9 @@ export default function RecommendedPersonal(props: Props) {
 
   React.useEffect(() => {
     // -- Update parent's callback request
-    onLoad(count > 0);
+    if (typeof onLoad === 'function') {
+      onLoad(count > 0);
+    }
   }, [count, onLoad]);
 
   React.useEffect(() => {

ui/page/home/view.jsx

@@ -2,7 +2,7 @@
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import { SITE_NAME, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
-import React, { useState } from 'react';
+import React from 'react';
 import Page from 'component/page';
 import Button from 'component/button';
 import ClaimTilesDiscover from 'component/claimTilesDiscover';
@@ -22,6 +22,10 @@ import Ads from 'web/component/ads';
 import Meme from 'web/component/meme';
 // @endif
 
+function resolveTitleOverride(title: string) {
+  return title === 'Recent From Following' ? 'Following' : title;
+}
+
 type Props = {
   authenticated: boolean,
   followedTags: Array<Tag>,
@@ -119,19 +123,18 @@ function HomePage(props: Props) {
           'show-ribbon': index === 0,
         })}
       >
-        {/* category header */}
+        {title && typeof title === 'string' && (
-        {index !== 0 && title && typeof title === 'string' && (
+          <SectionHeader title={__(resolveTitleOverride(title))} navigate={route || link} icon={icon} help={help} />
-          <SectionHeader title={__(title)} navigate={route || link} icon={icon} help={help} />
         )}
 
         {index === 0 && <>{claimTiles}</>}
+
         {index !== 0 && (
           <WaitUntilOnPage name={title} placeholder={tilePlaceholder} yOffset={800}>
             {claimTiles}
           </WaitUntilOnPage>
         )}
 
-        {/* view more button */}
         {(route || link) && (
           <Button
             className="claim-grid__title--secondary"
@@ -149,10 +152,6 @@ function HomePage(props: Props) {
     doFetchActiveLivestreams();
   }, []);
 
-  const [hasPersonalRecommendations, setHasPersonalRecommendations] = useState(false);
-  const [hasScheduledStreams, setHasScheduledStreams] = useState(false);
-  const scheduledStreamsLoaded = (total) => setHasScheduledStreams(total > 0);
-
   return (
     <Page className="homePage-wrapper" fullWidthPage>
       {!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (
@@ -174,7 +173,7 @@ function HomePage(props: Props) {
       {SIMPLE_SITE && <Meme />}
       {/* @endif */}
 
-      <RecommendedPersonal onLoad={(displayed) => setHasPersonalRecommendations(displayed)} />
+      <RecommendedPersonal />
 
       {!fetchingActiveLivestreams && (
         <>
@@ -184,13 +183,8 @@ function HomePage(props: Props) {
               tileLayout
               liveUris={getLivestreamUris(activeLivestreams, channelIds)}
               limitClaimsPerChannel={2}
-              onLoad={scheduledStreamsLoaded}
             />
           )}
-
-          {authenticated && ((hasScheduledStreams && !hideScheduledLivestreams) || hasPersonalRecommendations) && (
-            <SectionHeader title={__('Following')} navigate={`/$/${PAGES.CHANNELS_FOLLOWING}`} icon={ICONS.SUBSCRIBE} />
-          )}
         </>
       )}