FYP: show placeholder tiles when fetching membership or fyp itself.

This prevents the "no membership" and "no recommendations" message from flashing during load.

flow-typed/search.js

@@ -33,7 +33,7 @@ declare type SearchState = {
   hasReachedMaxResultsLength: {},
   searching: boolean,
   mentionQuery: string,
-  personalRecommendations: { gid: string, uris: Array<string> },
+  personalRecommendations: { gid: string, uris: Array<string>, fetched: boolean },
 };
 
 declare type SearchSuccess = {
@@ -44,7 +44,6 @@ declare type SearchSuccess = {
     size: number,
     uris: Array<string>,
     recsys: string,
-    query: string,
   },
 };
 

ui/component/recommendedPersonal/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import Button from 'component/button';
 import ClaimList from 'component/claimList';
+import ClaimPreviewTile from 'component/claimPreviewTile';
 import I18nMessage from 'component/i18nMessage';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
@@ -26,8 +27,8 @@ type Props = {
   onLoad: (displayed: boolean) => void,
   // --- redux ---
   userId: ?string,
-  personalRecommendations: { gid: string, uris: Array<string> },
+  personalRecommendations: { gid: string, uris: Array<string>, fetched: boolean },
-  hasMembership: boolean,
+  hasMembership: ?boolean,
   doFetchPersonalRecommendations: () => void,
 };
 
@@ -89,6 +90,26 @@ export default function RecommendedPersonal(props: Props) {
   // **************************************************************************
   // **************************************************************************
 
+  if (hasMembership === undefined || !personalRecommendations.fetched) {
+    return (
+      <>
+        {header}
+        <ul className="claim-grid">
+          {new Array(countCollapsed).fill(1).map((x, i) => (
+            <ClaimPreviewTile key={i} placeholder />
+          ))}
+        </ul>
+        <div className="livestream-list--view-more" style={{ visibility: 'hidden' }}>
+          <Button
+            label='"View More" dummy to reduce layout shift'
+            button="link"
+            className="claim-grid__title--secondary"
+          />
+        </div>
+      </>
+    );
+  }
+
   if (!hasMembership) {
     return (
       <div>

ui/redux/reducers/search.js

@@ -22,7 +22,7 @@ const defaultState: SearchState = {
   searching: false,
   results: [],
   mentionQuery: '',
-  personalRecommendations: { gid: '', uris: [] },
+  personalRecommendations: { gid: '', uris: [], fetched: false },
 };
 
 export default handleActions(
@@ -82,13 +82,17 @@ export default handleActions(
         personalRecommendations: {
           gid: action.data.gid,
           uris: action.data.uris,
+          fetched: true,
         },
       };
     },
 
     [ACTIONS.FYP_FETCH_FAILED]: (state: SearchState, action: any): SearchState => ({
       ...state,
-      personalRecommendations: defaultState.personalRecommendations,
+      personalRecommendations: {
+        ...defaultState.personalRecommendations,
+        fetched: true,
+      },
     }),
 
     [ACTIONS.FYP_HIDE_URI]: (state: SearchState, action: any): SearchState => {
@@ -100,6 +104,7 @@ export default handleActions(
         return {
           ...state,
           personalRecommendations: {
+            ...state.personalRecommendations,
             gid: state.personalRecommendations.gid,
             uris,
           },

ui/redux/selectors/user.js

@@ -114,6 +114,12 @@ export const selectOdyseeMembershipIsPremiumPlus = (state) => {
   return selectState(state).odyseeMembershipName === 'Premium+';
 };
 
+/**
+ * selectHasOdyseeMembership
+ *
+ * @param state
+ * @returns 'undefined' if not yet fetched; boolean otherwise.
+ */
 export const selectHasOdyseeMembership = (state) => {
   // @if process.env.NODE_ENV!='production'
   const override = window.localStorage.getItem('hasMembershipOverride');
@@ -122,8 +128,8 @@ export const selectHasOdyseeMembership = (state) => {
   }
   // @endif
 
-  const membershipName = selectOdyseeMembershipName(state);
+  const membership = selectOdyseeMembershipName(state);
-  return Boolean(membershipName);
+  return membership === undefined ? membership : Boolean(membership);
 };
 
 export const selectYouTubeImportVideosComplete = createSelector(selectState, (state) => {