perf(lecturers): replace FlatList with FlashList for improved perform…

…ance and layout adjustments
neuland-ingolstadt · Dec 7, 2024 · 979a179 · 979a179
1 parent 7131482
commit 979a179
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,60 @@
 
 All notable changes to this project will be documented in this file.
 
+## [unreleased]
+
+### 🚀 Features
+
+-   _(grades, profile)_ Add app state handling for privacy visibility
+-   _(events)_ Replace static club data with api data
+-   _(ui)_ Integrate edge-to-edge layout on android
+-   _(error)_ Include current pathname in feedback email content
+-   _(api)_ Add GraphQL code generation (#130)
+-   _(app)_ Enable react native new arch (#131)
+-   _(api)_ Extend announcement popup with platform and userKind filter
+-   _(news)_ Add NewsCard component with carousel
+
+### 🐛 Bug Fixes
+
+-   _(cards)_ Correct sorting order of active announcements by priority
+-   _(android)_ Fixes laggy navigation bar background logic
+-   _(android)_ Remove laggy page transition animations
+-   _(share)_ Add placeholder button to prevent flicker on load
+-   _(rooms)_ Disable map link for invalid rooms
+-   _(lecture)_ Restore lecture detail navigation
+-   _(map)_ Improve color handling for platform compatibility
+-   _(calendar)_ Enhance exam details display and improve date formatting
+-   _(map)_ Correct query key for fetching free rooms
+-   _(settings)_ Improve loading state handling
+-   _(events)_ Update event titles and descriptions structure
+-   _(lecture)_ Handle null exam values
+-   _(about)_ Update logoIcon styles to improve shadow effect
+-   _(lecturers)_ Add SafeAreaView for improved searchbar layout
+-   _(map)_ Fix laggy map bottom sheet animation
+-   _(lecturers)_ Replace FlatList with FlashList for improved performance and layout adjustments
+
+### 🚜 Refactor
+
+-   _(map)_ Break down into several components
+-   _(app)_ Enable expo-router typed routes
+-   _(api)_ Replace graphql-request with fetch for GraphQL queries
+-   _(layout)_ Simplify layout components by removing unnecessary padding and views
+
+### ⚡ Performance
+
+-   _(navigation)_ Replace InteractionManager with dismissTo for room navigation
+
+### 🎨 Styling
+
+-   Migrate to Unistyles for improved theming and code style (#119)
+-   _(map)_ Add uniform indicator style for BottomSheet components
+-   _(calendar)_ Improves semester dates section name
+
+### ⚙️ Miscellaneous Tasks
+
+-   Upgrade to React Native 0.76 and Expo SDK 52 (#123)
+-   _(git)_ Update issue templates
+
 ## [0.10.1] - 2024-11-09
 
 ### 🚀 Features

diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -91,7 +91,7 @@ android {
         applicationId 'app.neuland'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 235
+        versionCode 237
         versionName "0.11.0"
     }
     signingConfigs {

diff --git a/app.config.json b/app.config.json
@@ -36,7 +36,7 @@
         "android": {
             "package": "app.neuland",
             "userInterfaceStyle": "automatic",
-            "versionCode": 235
+            "versionCode": 237
         },
         "sdkVersion": "52.0.0",
         "experiments": {

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -31,12 +31,12 @@
     "@maplibre/maplibre-react-native": "10.0.0-alpha.28",
     "@react-native-community/datetimepicker": "8.2.0",
     "@react-native-community/netinfo": "11.4.1",
-    "@react-navigation/native": "^7.0.13",
+    "@react-navigation/native": "^7.0.0",
     "@react-navigation/stack": "^7.0.18",
     "@shopify/flash-list": "1.7.1",
-    "@tanstack/query-sync-storage-persister": "^5.62.2",
-    "@tanstack/react-query": "^5.62.2",
-    "@tanstack/react-query-persist-client": "^5.62.2",
+    "@tanstack/query-sync-storage-persister": "^5.62.3",
+    "@tanstack/react-query": "^5.62.3",
+    "@tanstack/react-query-persist-client": "^5.62.3",
     "@th3rdwave/react-navigation-bottom-sheet": "0.3.2",
     "burnt": "^0.12.2",
     "color": "^4.2.3",
@@ -87,7 +87,7 @@
     "react-native-select-dropdown": "^4.0.1",
     "react-native-svg": "15.8.0",
     "react-native-unistyles": "^2.20.0",
-    "react-native-view-shot": "~4.0.2",
+    "react-native-view-shot": "~4.0.3",
     "react-native-webview": "13.12.5",
     "react-native-week-view": "0.30.0",
     "rn-quick-actions": "^0.0.3",
@@ -110,7 +110,7 @@
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/bun": "latest",
     "@types/color": "^3.0.6",
-    "@types/geojson": "^7946.0.14",
+    "@types/geojson": "^7946.0.15",
     "@types/node": "^22.10.1",
     "@types/prop-types": "^15.7.14",
     "@types/react": "~18.3.14",
@@ -151,6 +151,7 @@
     "@th3rdwave/[email protected]": "patches/@th3rdwave%[email protected]",
     "[email protected]": "patches/[email protected]",
     "[email protected]": "patches/[email protected]",
-    "@aptabase/[email protected]": "patches/@aptabase%[email protected]"
+    "@aptabase/[email protected]": "patches/@aptabase%[email protected]",
+    "[email protected]": "patches/[email protected]"
   }
 }
diff --git a/patches/[email protected] b/patches/[email protected]
@@ -0,0 +1,18 @@
+diff --git a/AnySizeDragSortableView.js b/AnySizeDragSortableView.js
+index 9450cbc6782441c62fcb950491eca921cce72aee..ff0692677f25953c6fedf6d53066355b85be0114 100644
+--- a/AnySizeDragSortableView.js
++++ b/AnySizeDragSortableView.js
+@@ -6,11 +6,11 @@ import {
+   View,
+   PanResponder,
+   LayoutAnimation,
+-  Platform
++  Platform,
++  UIManager
+ } from 'react-native';
+ const PropTypes = require('prop-types')
+ const ANIM_DURATION = 300
+-const { UIManager } = NativeModules;
+
+ if (Platform.OS === 'android') {
+   if (UIManager.setLayoutAnimationEnabledExperimental) {
diff --git a/src/app/(screens)/lecturers.tsx b/src/app/(screens)/lecturers.tsx
@@ -18,6 +18,7 @@ import {
 } from '@/utils/api-utils'
 import { normalizeLecturers } from '@/utils/lecturers-utils'
 import { pausedToast } from '@/utils/ui-utils'
+import { FlashList } from '@shopify/flash-list'
 import { useQueries, useQuery } from '@tanstack/react-query'
 import { useNavigation, useRouter } from 'expo-router'
 import Fuse from 'fuse.js'
@@ -30,7 +31,6 @@ import React, {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-    FlatList,
     Linking,
     Platform,
     RefreshControl,
@@ -316,11 +316,11 @@ export default function LecturersCard(): JSX.Element {
                 />
             </View>
         ) : isSuccess && lecturers != null && lecturers?.length > 0 ? (
-            <FlatList
+            <FlashList
                 data={lecturers}
                 keyExtractor={(_, index) => index.toString()}
                 contentContainerStyle={styles.loadedRows}
-                contentInsetAdjustmentBehavior="always"
+                estimatedItemSize={101}
                 refreshControl={
                     <RefreshControl
                         refreshing={
@@ -335,14 +335,31 @@ export default function LecturersCard(): JSX.Element {
                         }}
                     />
                 }
-                style={styles.pageBottom}
                 renderItem={({ item, index }) => (
-                    <React.Fragment key={index}>
+                    <View
+                        key={index}
+                        // eslint-disable-next-line react-native/no-inline-styles
+                        style={{
+                            overflow: 'hidden',
+                            borderTopStartRadius:
+                                index === 0 ? theme.radius.md : 0,
+                            borderTopEndRadius:
+                                index === 0 ? theme.radius.md : 0,
+                            borderBottomStartRadius:
+                                index === lecturers.length - 1
+                                    ? theme.radius.md
+                                    : 0,
+                            borderBottomEndRadius:
+                                index === lecturers.length - 1
+                                    ? theme.radius.md
+                                    : 0,
+                        }}
+                    >
                         <LecturerRow item={item} />
                         {index !== lecturers.length - 1 && (
                             <Divider iosPaddingLeft={16} />
                         )}
-                    </React.Fragment>
+                    </View>
                 )}
             />
         ) : (
@@ -501,10 +518,10 @@ const stylesheet = createStyleSheet((theme) => ({
         marginHorizontal: theme.margins.page,
         paddingBottom: theme.margins.bottomSafeArea,
     },
+
     loadedRows: {
-        backgroundColor: theme.colors.card,
-        borderRadius: theme.radius.md,
-        marginHorizontal: theme.margins.page,
+        paddingBottom: theme.margins.bottomSafeArea,
+        paddingHorizontal: theme.margins.page,
     },
     loadingContainer: {
         alignItems: 'center',
@@ -514,9 +531,6 @@ const stylesheet = createStyleSheet((theme) => ({
     page: {
         flex: 1,
     },
-    pageBottom: {
-        paddingBottom: theme.margins.bottomSafeArea,
-    },
     pagePadding: {
         paddingHorizontal: theme.margins.page,
     },

diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -12,7 +12,7 @@ import Head from 'expo-router/head'
 import * as ScreenOrientation from 'expo-screen-orientation'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { AppState, Platform, Pressable, UIManager } from 'react-native'
+import { AppState, Platform, Pressable } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
 import { SystemBars } from 'react-native-edge-to-edge'
 import {
@@ -26,11 +26,6 @@ export const unstable_settings = {
     initialRouteName: '(index)',
 }
 
-if (Platform.OS === 'android') {
-    if (UIManager.setLayoutAnimationEnabledExperimental != null) {
-        UIManager.setLayoutAnimationEnabledExperimental(true)
-    }
-}
 function RootLayout(): JSX.Element {
     const router = useRouter()
     const { t } = useTranslation(['navigation'])

diff --git a/src/components/Map/AvailableRoomsSuggestions.tsx b/src/components/Map/AvailableRoomsSuggestions.tsx
@@ -203,7 +203,7 @@ const stylesheet = createStyleSheet((theme) => ({
         color: theme.colors.primary,
         fontSize: 16,
         fontWeight: '500',
-        paddingRight: 10,
+        paddingRight: 10.1,
         textAlign: 'right',
     },
     suggestionRightContainer: {
@@ -240,7 +240,6 @@ const stylesheet = createStyleSheet((theme) => ({
         fontWeight: '600',
         marginBottom: 1,
     },
-
     time: {
         color: theme.colors.text,
         fontVariant: ['tabular-nums'],

diff --git a/src/components/Rows/LecturerRow.tsx b/src/components/Rows/LecturerRow.tsx
@@ -9,7 +9,7 @@ import { createStyleSheet, useStyles } from 'react-native-unistyles'
 import RowEntry from '../Universal/RowEntry'
 
 const LecturerRow = ({ item }: { item: NormalizedLecturer }): JSX.Element => {
-    const { styles } = useStyles(stylesheet)
+    const { styles, theme } = useStyles(stylesheet)
 
     const onPressRoom = (): void => {
         router.dismissTo({
@@ -25,7 +25,6 @@ const LecturerRow = ({ item }: { item: NormalizedLecturer }): JSX.Element => {
         })
     }
     const { t } = useTranslation('api')
-
     return (
         <RowEntry
             title={`${[item.titel, item.vorname, item.name].join(' ').trim()}`}
@@ -68,6 +67,7 @@ const LecturerRow = ({ item }: { item: NormalizedLecturer }): JSX.Element => {
                     </View>
                 </>
             }
+            backgroundColor={theme.colors.card}
             onPress={onPressRow}
             maxTitleWidth={'75%'}
         />

diff --git a/src/data/licenses.json b/src/data/licenses.json
@@ -65,19 +65,19 @@
         "licenseUrl": "https://github.com/Shopify/flash-list/raw/master/LICENSE.md",
         "parents": "neuland"
     },
-    "@tanstack/[email protected].2": {
+    "@tanstack/[email protected].3": {
         "licenses": "MIT",
         "repository": "https://github.com/TanStack/query",
         "licenseUrl": "https://github.com/TanStack/query/raw/master/LICENSE",
         "parents": "neuland"
     },
-    "@tanstack/[email protected].2": {
+    "@tanstack/[email protected].3": {
         "licenses": "MIT",
         "repository": "https://github.com/TanStack/query",
         "licenseUrl": "https://github.com/TanStack/query/raw/master/LICENSE",
         "parents": "neuland"
     },
-    "@tanstack/[email protected].2": {
+    "@tanstack/[email protected].3": {
         "licenses": "MIT",
         "repository": "https://github.com/TanStack/query",
         "licenseUrl": "https://github.com/TanStack/query/raw/master/LICENSE",
@@ -371,7 +371,7 @@
         "licenseUrl": "https://github.com/jpudysz/react-native-unistyles/raw/master/LICENSE",
         "parents": "neuland"
     },
-    "[email protected].2": {
+    "[email protected].3": {
         "licenses": "MIT",
         "repository": "https://github.com/gre/react-native-view-shot",
         "licenseUrl": "https://github.com/gre/react-native-view-shot/raw/master/LICENSE",