feat(entitlement): prevent UI blocking while loading auth or subscrip…

…tions
jwplayer · May 23, 2022 · fefab30 · fefab30
1 parent a474b2a
commit fefab30
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
@@ -64,7 +64,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled, isMediaEntitlementLoading, mediaOffers } = useEntitlement(item);
+  const { isEntitled, mediaOffers } = useEntitlement(item);
   const setRequestedMediaOffers = useCheckoutStore((s) => s.setRequestedMediaOffers);
 
   // Handlers
@@ -93,8 +93,8 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
 
   const startWatchingLabel = useMemo((): string => {
     if (isEntitled) return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
-    if (!user) return t('sign_up_to_start_watching');
     if (mediaOffers.length) return t('buy');
+    if (!user) return t('sign_up_to_start_watching');
 
     return t('complete_your_subscription');
   }, [isEntitled, user, mediaOffers, progress, t]);
@@ -130,7 +130,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
   }, [isEntitled, mediaOffers, setRequestedMediaOffers]);
 
   // UI
-  if ((isLoading && !item) || isMediaEntitlementLoading) return <LoadingOverlay />;
+  if (isLoading && !item) return <LoadingOverlay />;
   if ((!isLoading && error) || !item) return <ErrorPage title={t('video_not_found')} />;
 
   const pageTitle = `${item.title} - ${siteName}`;

diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
@@ -70,7 +70,7 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled, isMediaEntitlementLoading, mediaOffers } = useEntitlement(item);
+  const { isEntitled, mediaOffers } = useEntitlement(item);
 
   // Handlers
   const goBack = () => item && seriesPlaylist && history.push(episodeURL(seriesPlaylist, item.mediaid, false));
@@ -98,8 +98,8 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
 
   const startWatchingLabel = useMemo((): string => {
     if (isEntitled) return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
-    if (!user) return t('sign_up_to_start_watching');
     if (mediaOffers.length) return t('buy');
+    if (!user) return t('sign_up_to_start_watching');
 
     return t('complete_your_subscription');
   }, [isEntitled, progress, user, mediaOffers, t]);
@@ -131,7 +131,7 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
   }, [history, searchParams, seriesPlaylist]);
 
   // UI
-  if ((!item && isLoading) || playlistIsLoading || !searchParams.has('e') || isMediaEntitlementLoading) return <LoadingOverlay />;
+  if ((!item && isLoading) || playlistIsLoading || !searchParams.has('e')) return <LoadingOverlay />;
   if ((!isLoading && error) || !item) return <ErrorPage title={t('episode_not_found')} />;
   if (playlistError || !seriesPlaylist) return <ErrorPage title={t('series_not_found')} />;