From 732628f87da9f9fae4aa1bcadf823dbbd745ca42 Mon Sep 17 00:00:00 2001
From: Igor Khramtsov <igor.khramtsov@proton.me>
Date: Sun, 20 Oct 2024 22:15:56 +0400
Subject: [PATCH] feat: optimize subject picker

---
 app/(app)/extraStudy/index.tsx       |  2 --
 app/_layout.tsx                      |  1 +
 src/components/SubjectPickerPage.tsx | 21 +++++------
 src/components/SubjectTile.tsx       |  4 +++
 src/utils/time-polyfil.js            | 52 ++++++++++++++++++++++++++++
 5 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/time-polyfil.js

diff --git a/app/(app)/extraStudy/index.tsx b/app/(app)/extraStudy/index.tsx
index 505daf5..8424179 100644
--- a/app/(app)/extraStudy/index.tsx
+++ b/app/(app)/extraStudy/index.tsx
@@ -4,8 +4,6 @@ import { appStyles } from '@/src/constants/styles'
 import typography from '@/src/constants/typography'
 import { useSubjectCache } from '@/src/hooks/useSubjectCache'
 import { Subject, SubjectType } from '@/src/types/subject'
-import { StringUtils } from '@/src/utils/stringUtils'
-import { FontAwesome } from '@expo/vector-icons'
 import { router } from 'expo-router'
 import { useCallback, useMemo, useState } from 'react'
 import { Pressable, Text, View } from 'react-native'
diff --git a/app/_layout.tsx b/app/_layout.tsx
index d86bc14..37501df 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,3 +1,4 @@
+import '@/src/utils/time-polyfil'
 import { SessionProvider } from '@/src/context/authContext'
 import { createStore } from '@/src/redux/store'
 import { dbHelper } from '@/src/utils/dbHelper'
diff --git a/src/components/SubjectPickerPage.tsx b/src/components/SubjectPickerPage.tsx
index 5c3f4d7..5f01d5a 100644
--- a/src/components/SubjectPickerPage.tsx
+++ b/src/components/SubjectPickerPage.tsx
@@ -4,20 +4,21 @@ import { appStyles } from '@/src/constants/styles'
 import typography from '@/src/constants/typography'
 import { Subject } from '@/src/types/subject'
 import { Fragment, useCallback, useState } from 'react'
-import {
-  LayoutChangeEvent,
-  Pressable,
-  ScrollView,
-  Text,
-  View,
-} from 'react-native'
+import { Pressable, ScrollView, Text, View } from 'react-native'
 import { useSafeArea } from 'react-native-safe-area-context'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
 import { BlurView } from 'expo-blur'
 import Collapsible from './Collapsible'
+import React from 'react'
 
 const MAX_CATEGORY_HEIGHT = 84
 
+// This optimizes rendering a lot
+const MemoizedSubjectTile = React.memo(({ subject }: { subject: Subject }) => {
+  return <SubjectTile subject={subject} variant='compact' isPressable={false} />
+})
+MemoizedSubjectTile.displayName = 'MemoizedSubjectTile'
+
 export type Category = {
   name: string
   children: Category[] | Subject[]
@@ -123,11 +124,7 @@ export const SubjectPickerPage = ({
                                     styles.subjectTile,
                                     { opacity: isSelected ? 1.0 : 0.55 },
                                   ]}>
-                                  <SubjectTile
-                                    subject={subject}
-                                    variant='compact'
-                                    isPressable={false}
-                                  />
+                                  <MemoizedSubjectTile subject={subject} />
                                 </View>
                               </Pressable>
                             )
diff --git a/src/components/SubjectTile.tsx b/src/components/SubjectTile.tsx
index 07dfe05..8b29ffb 100644
--- a/src/components/SubjectTile.tsx
+++ b/src/components/SubjectTile.tsx
@@ -104,6 +104,10 @@ export const SubjectTile = ({
     }
   })()
 
+  if (!isPressable) {
+    return node
+  }
+
   return (
     <Pressable
       disabled={!isPressable}
diff --git a/src/utils/time-polyfil.js b/src/utils/time-polyfil.js
new file mode 100644
index 0000000..b9ad4b3
--- /dev/null
+++ b/src/utils/time-polyfil.js
@@ -0,0 +1,52 @@
+'use strict'
+
+const PerformanceNow =
+  (global.performance && global.performance.now) ||
+  global.performanceNow ||
+  global.nativePerformanceNow || (() => { try {
+    var now = require('fbjs/lib/performanceNow')
+  } finally { return now }})();
+
+const DEFAULT_LABEL = 'default';
+const DEFAULT_PREC  = 3;
+
+let counts     = {};
+let startTimes = {};
+
+const fixed = n => Math.trunc(n) === n ? n + '' : n.toFixed(DEFAULT_PREC);
+
+console.time    = console.time    || ((label = DEFAULT_LABEL) => { startTimes[label] = PerformanceNow() });
+console.timeLog = console.timeLog || ((label = DEFAULT_LABEL, desc) => timeRecord(label, desc));
+console.timeEnd = console.timeEnd || ((label = DEFAULT_LABEL) => timeRecord(label, undefined, true));
+
+console.count = console.count || ((label = DEFAULT_LABEL) => {
+  if (!counts[label]) {
+    counts[label] = 0;
+  }
+  counts[label]++;
+  console.log(`${label}: ${counts[label]}`);
+});
+
+console.countReset = console.countReset || ((label = DEFAULT_LABEL) => {
+  if (counts[label]) {
+    counts[label] = 0;
+  } else {
+    console.warn(`Count for '${label}' does not exist`);
+  }
+});
+
+function timeRecord(label, desc, final) {
+  const endTime = PerformanceNow();
+  const startTime = startTimes[label];
+  if (startTime) {
+    const delta = endTime - startTime;
+    if (desc) {
+      console.log(`${label}: ${fixed(delta)}ms ${desc}`);
+    } else {
+      console.log(`${label}: ${fixed(delta)}ms`);
+    }
+    if (final) delete startTimes[label];
+  } else {
+    console.warn(`Timer '${label}' does not exist`);
+  }
+}