[WIP] Performance improvements experiments for web

@types/react-window/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+export * from 'react-window'
+
+declare module 'react-window' {
+  import * as RW from 'react-window'
+
+  export interface DynamicSizeListProps extends RW.ListProps {
+    estimatedItemSize?: number
+  }
+
+  export class DynamicSizeList extends React.Component<DynamicSizeListProps> {
+    scrollTo(scrollOffset: number): void
+    scrollToItem(index: number, align?: RW.Align): void
+  }
+}

packages/components/package.json

@@ -38,6 +38,8 @@
     "react-redux": "7.1.0",
     "react-spring": "8.0.25",
     "react-test-renderer": "16.8.6",
+    "react-virtualized-auto-sizer": "1.0.2",
+    "react-window": "npm:@brunolemos/react-window",
     "redux": "4.0.1",
     "redux-devtools-extension": "2.13.8",
     "redux-persist": "5.10.0",
@@ -59,6 +61,8 @@
     "@types/react-navigation": "3.0.5",
     "@types/react-redux": "7.1.1",
     "@types/react-test-renderer": "16.8.1",
+    "@types/react-virtualized-auto-sizer": "1.0.0",
+    "@types/react-window": "1.8.0",
     "@types/yup": "0.26.14",
     "babel-jest": "24.5.0",
     "husky": "1.3.1",

packages/components/src/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { StrictMode } from 'react'
 
 import '../libs/analytics'
 
@@ -11,13 +11,9 @@ import { UnreadCountProvider } from './context/UnreadCountContext'
 
 enableNetworkInterceptors()
 
-// TODO: Enable StrictMode after react-native fixes it
-// @see https://github.com/facebook/react-native/issues/22186
-const StrictModePlaceholder = Fragment
-
 export function App() {
   return (
-    <StrictModePlaceholder>
+    <StrictMode>
       <AppProviders>
         <AppGlobalStyles key="app-global-styles" />
         <AppNavigator key="app-navigator" />
@@ -26,6 +22,6 @@ export function App() {
           <AppIconBadge />
         </UnreadCountProvider>
       </AppProviders>
-    </StrictModePlaceholder>
+    </StrictMode>
   )
 }

packages/components/src/components/cards/EventCard.tsx

@@ -628,7 +628,6 @@ export const EventCard = React.memo((props: EventCardProps) => {
             isRead={isRead}
             itemIds={id}
             muted={muted}
-            size={columnHeaderItemContentSize}
             type="activity"
           />
         </View>

packages/components/src/components/cards/EventCards.tsx

@@ -14,7 +14,6 @@ import { useKeyboardScrolling } from '../../hooks/use-keyboard-scrolling'
 import { useReduxAction } from '../../hooks/use-redux-action'
 import { bugsnag, ErrorBoundary } from '../../libs/bugsnag'
 import { FlatList, FlatListProps } from '../../libs/flatlist'
-import { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import { sharedStyles } from '../../styles/shared'
 import { contentPadding } from '../../styles/variables'
@@ -53,6 +52,8 @@ function keyExtractor(item: EnhancedGitHubEvent, _index: number) {
   return `event-card-${item.id}`
 }
 
+const stickyHeaderIndices = [0]
+
 export const EventCards = React.memo((props: EventCardsProps) => {
   const {
     cardViewMode,
@@ -181,9 +182,9 @@ export const EventCards = React.memo((props: EventCardsProps) => {
           enableCompactLabels={enableCompactLabels}
           event={item}
           isFocused={
+            !disableItemFocus &&
             column.id === focusedColumnId &&
-            item.id === selectedItemIdRef.current &&
-            !disableItemFocus
+            item.id === selectedItemIdRef.current
           }
           repoIsKnown={props.repoIsKnown}
           swipeable={props.swipeable}
@@ -194,7 +195,9 @@ export const EventCards = React.memo((props: EventCardsProps) => {
 
   const renderItem = useCallback(_renderItem, [
     cardViewMode,
-    column.id === focusedColumnId && selectedItemIdRef.current,
+    !disableItemFocus &&
+      column.id === focusedColumnId &&
+      selectedItemIdRef.current,
     enableCompactLabels,
     props.swipeable,
     props.repoIsKnown,
@@ -349,7 +352,7 @@ export const EventCards = React.memo((props: EventCardsProps) => {
     )
   }
 
-  function renderEmptyComponent() {
+  const renderEmptyComponent = useCallback(() => {
     return (
       <EmptyCards
         column={column}
@@ -360,7 +363,7 @@ export const EventCards = React.memo((props: EventCardsProps) => {
         refresh={refresh}
       />
     )
-  }
+  }, [column, errorMessage, fetchNextPage, loadState, refresh])
 
   return (
     <FlatList
@@ -375,17 +378,17 @@ export const EventCards = React.memo((props: EventCardsProps) => {
       // contentOffset={{ x: 0, y: cardSearchTotalHeight }}
       data-flatlist-with-header-content-container-full-height-fix={isEmpty}
       data={items}
-      disableVirtualization={Platform.OS === 'web'}
+      disableVirtualization={false}
       extraData={rerender}
       initialNumToRender={Math.ceil(Dimensions.get('window').height / 80)}
       keyExtractor={keyExtractor}
       onScrollToIndexFailed={onScrollToIndexFailed}
       onViewableItemsChanged={handleViewableItemsChanged}
       pointerEvents={pointerEvents}
       refreshControl={refreshControl}
-      removeClippedSubviews={Platform.OS !== 'web'}
+      removeClippedSubviews
       renderItem={renderItem}
-      stickyHeaderIndices={[0]}
+      stickyHeaderIndices={stickyHeaderIndices}
       viewabilityConfig={viewabilityConfig}
       windowSize={2}
     />

packages/components/src/components/cards/IssueOrPullRequestCard.tsx

@@ -527,7 +527,6 @@ export const IssueOrPullRequestCard = React.memo(
               isRead={isRead}
               itemIds={id}
               muted={muted}
-              size={columnHeaderItemContentSize}
               type="issue_or_pr"
             />
           </View>

packages/components/src/components/cards/IssueOrPullRequestCards.tsx

@@ -17,7 +17,6 @@ import { useReduxAction } from '../../hooks/use-redux-action'
 import { useReduxState } from '../../hooks/use-redux-state'
 import { bugsnag, ErrorBoundary } from '../../libs/bugsnag'
 import { FlatList, FlatListProps } from '../../libs/flatlist'
-import { Platform } from '../../libs/platform'
 import * as actions from '../../redux/actions'
 import * as selectors from '../../redux/selectors'
 import { sharedStyles } from '../../styles/shared'
@@ -61,6 +60,8 @@ function keyExtractor(item: EnhancedGitHubIssueOrPullRequest) {
   return `issue-or-pr-card-${item.id}`
 }
 
+const stickyHeaderIndices = [0]
+
 export const IssueOrPullRequestCards = React.memo(
   (props: IssueOrPullRequestCardsProps) => {
     const {
@@ -197,9 +198,9 @@ export const IssueOrPullRequestCards = React.memo(
             cardViewMode={cardViewMode}
             enableCompactLabels={enableCompactLabels}
             isFocused={
+              !disableItemFocus &&
               column.id === focusedColumnId &&
-              item.id === selectedItemIdRef.current &&
-              !disableItemFocus
+              item.id === selectedItemIdRef.current
             }
             issueOrPullRequest={item}
             repoIsKnown={props.repoIsKnown}
@@ -211,7 +212,9 @@ export const IssueOrPullRequestCards = React.memo(
     }
     const renderItem = useCallback(_renderItem, [
       cardViewMode,
-      column.id === focusedColumnId && selectedItemIdRef.current,
+      !disableItemFocus &&
+        column.id === focusedColumnId &&
+        selectedItemIdRef.current,
       enableCompactLabels,
       props.repoIsKnown,
       props.swipeable,
@@ -351,7 +354,7 @@ export const IssueOrPullRequestCards = React.memo(
       )
     }
 
-    function renderEmptyComponent() {
+    const renderEmptyComponent = useCallback(() => {
       const maybeInvalidFilters = `${errorMessage || ''}`
         .toLowerCase()
         .startsWith('validation failed')
@@ -411,7 +414,14 @@ export const IssueOrPullRequestCards = React.memo(
           refresh={refresh}
         />
       )
-    }
+    }, [
+      column,
+      errorMessage,
+      fetchNextPage,
+      loadState,
+      refresh,
+      loggedUsername,
+    ])
 
     return (
       <FlatList
@@ -427,17 +437,17 @@ export const IssueOrPullRequestCards = React.memo(
         // contentOffset={{ x: 0, y: cardSearchTotalHeight }}
         data-flatlist-with-header-content-container-full-height-fix={isEmpty}
         data={items}
-        disableVirtualization={Platform.OS === 'web'}
+        disableVirtualization={false}
         extraData={rerender}
         initialNumToRender={Math.ceil(Dimensions.get('window').height / 100)}
         keyExtractor={keyExtractor}
         onScrollToIndexFailed={onScrollToIndexFailed}
         onViewableItemsChanged={handleViewableItemsChanged}
         pointerEvents={pointerEvents}
         refreshControl={refreshControl}
-        removeClippedSubviews={Platform.OS !== 'web'}
+        removeClippedSubviews
         renderItem={renderItem}
-        stickyHeaderIndices={[0]}
+        stickyHeaderIndices={stickyHeaderIndices}
         viewabilityConfig={viewabilityConfig}
         windowSize={2}
       />