bug: trigger connectAnimatedNodes crash

wouterds · Jul 5, 2023 · 5091d06 · 5091d06
1 parent ff72145
commit 5091d06
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/src/components/Swimlane/PopularMovies/index.tsx b/src/components/Swimlane/PopularMovies/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { FlatList, Text, TVFocusGuideView, View } from 'react-native';
 import { usePopularMovies } from 'store/popular-movies/hooks';
 
@@ -14,6 +14,15 @@ const PopularMoviesSwimlane = ({ hideTitle }: Props) => {
     fetch: true,
   });
 
+  const [forceShimmers, setForceShimmers] = useState(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setForceShimmers(!forceShimmers);
+    }, Math.random() * 5000 + 2000);
+
+    return () => clearTimeout(timeout);
+  }, [forceShimmers]);
+
   if (isEmpty) {
     // render empty state?
     return null;
@@ -33,7 +42,11 @@ const PopularMoviesSwimlane = ({ hideTitle }: Props) => {
           horizontal={true}
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
-          data={isLoading && data.length === 0 ? new Array(6).fill(null) : data}
+          data={
+            forceShimmers || (isLoading && data.length === 0)
+              ? new Array(6).fill(null)
+              : data
+          }
           renderItem={({ item }) => <Item id={item?.id} />}
         />
       </TVFocusGuideView>

diff --git a/src/components/Swimlane/PopularTVShows/index.tsx b/src/components/Swimlane/PopularTVShows/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { FlatList, Text, TVFocusGuideView, View } from 'react-native';
 import { usePopularTVShows } from 'store/popular-tv-shows/hooks';
 
@@ -14,6 +14,15 @@ const PopularTVShowsSwimlane = ({ hideTitle }: Props) => {
     fetch: true,
   });
 
+  const [forceShimmers, setForceShimmers] = useState(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setForceShimmers(!forceShimmers);
+    }, Math.random() * 5000 + 2000);
+
+    return () => clearTimeout(timeout);
+  }, [forceShimmers]);
+
   if (isEmpty) {
     // render empty state?
     return null;
@@ -33,7 +42,11 @@ const PopularTVShowsSwimlane = ({ hideTitle }: Props) => {
           horizontal={true}
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
-          data={isLoading && data.length === 0 ? new Array(6).fill(null) : data}
+          data={
+            forceShimmers || (isLoading && data.length === 0)
+              ? new Array(6).fill(null)
+              : data
+          }
           renderItem={({ item }) => <Item id={item?.id} />}
         />
       </TVFocusGuideView>

diff --git a/src/screens/Discover/index.tsx b/src/screens/Discover/index.tsx
@@ -18,7 +18,19 @@ const DiscoverScreen = () => {
       <Banner.UpcomingMovies />
       <Swimlane.TopRatedTVShows />
       <Swimlane.TopRatedMovies />
-      {/* <Swimlane.PopularTVShows /> */}
+      <Swimlane.PopularTVShows />
+      <Swimlane.TrendingToday />
+      <Swimlane.PopularTVShows />
+      <Swimlane.PopularMovies />
+      <Swimlane.TrendingToday />
+      <Swimlane.PopularTVShows />
+      <Swimlane.PopularMovies />
+      <Swimlane.TrendingToday />
+      <Swimlane.PopularTVShows />
+      <Swimlane.PopularMovies />
+      <Swimlane.TrendingToday />
+      <Swimlane.PopularTVShows />
+      <Swimlane.PopularMovies />
     </ScreenWrapper>
   );
 };