FYP: show placeholder tiles when fetching membership or fyp itself.
This prevents the "no membership" and "no recommendations" message from flashing during load.
This commit is contained in:
parent
09557c8ce2
commit
a96db41782
4 changed files with 39 additions and 8 deletions
3
flow-typed/search.js
vendored
3
flow-typed/search.js
vendored
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
@ -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> },
|
||||
hasMembership: boolean,
|
||||
personalRecommendations: { gid: string, uris: Array<string>, fetched: 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>
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
|
@ -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);
|
||||
return Boolean(membershipName);
|
||||
const membership = selectOdyseeMembershipName(state);
|
||||
return membership === undefined ? membership : Boolean(membership);
|
||||
};
|
||||
|
||||
export const selectYouTubeImportVideosComplete = createSelector(selectState, (state) => {
|
||||
|
|
Loading…
Reference in a new issue