Add context and background

Author: Hein

tutorials/code-changes/supabase-connector-performance.mdx

@@ -3,18 +3,39 @@ title: "Improve Supabase Connector Performance"
 description: "In this tutorial we will show you how to improve the performance of the Supabase Connector for the [React Native To-Do List example app](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-native-supabase-todolist)."
 ---
 
+# Background 
+
+The demos in the [powersync-js](https://github.com/powersync-ja/powersync-js/tree/main/demos) monorepo provide a minimal working example that illustrate the use of PowerSync with different frameworks.. 
+The demos are therefore not necessarily optimized for performance and can therefore be improved.
+
+This tutorial demonstrates how to improve the Supabase Connector's performance by implementing two batching strategies that reduce the number of database operations.
+
+# Batching Strategies
+
+The two batching strategies that will be implemented are:
+
+1. Sequential Merge Strategy, and
+2. Pre-sorted Batch Strategy    
+
 <AccordionGroup>
     <Accordion title="Sequential Merge Strategy">
+        Overview:
+        - Merge adjacent `PUT` and `DELETE` operations for the same table
+        - Limit the number of operations that are merged into a single API request to Supabase
         <Note>
             Shoutout to @christoffer_configura for the original implementation of this optimization.
         </Note>
-        ```typescript {7-8, 11, 13-15, 17, 19-20, 24-36, 39, 43-56, 59-60, 75}
+        ```typescript {6-12, 15, 17-19, 21, 23-24, 28-40, 43, 47-60, 63-64, 79}
         async uploadData(database: AbstractPowerSyncDatabase): Promise<void> {
             const transaction = await database.getNextCrudTransaction();
             if (!transaction) {
                 return;
             }
-
+            /**
+             * Maximum number of PUT or DELETE operations that are merged into a single API request to Supabase.
+             * Larger numbers can speed up the sync process considerably, but watch out for possible payload size limitations.
+             * A value of 1 or below disables merging.
+             */
             const MERGE_BATCH_LIMIT = 100;
             let batchedOps: CrudEntry[] = [];
 
@@ -36,7 +57,7 @@ description: "In this tutorial we will show you how to improve the performance o
                             while (
                                 i + 1 < cruds.length &&
                                 cruds[i + 1].op === op.op &&
-                                cruds[i + 1].op === op.op &&
+                                cruds[i + 1].table === op.table &&
                                 batched < MERGE_BATCH_LIMIT
                             ) {
                                 i++;
@@ -56,7 +77,7 @@ description: "In this tutorial we will show you how to improve the performance o
                             while (
                                 i + 1 < cruds.length &&
                                 cruds[i + 1].op === op.op &&
-                                cruds[i + 1].op === op.table &&
+                                cruds[i + 1].table === op.table &&
                                 batched < MERGE_BATCH_LIMIT
                             ) {
                                 i++;
@@ -94,7 +115,15 @@ description: "In this tutorial we will show you how to improve the performance o
         }
         ```
     </Accordion>
-    <Accordion title="Pre-sorted Batch Strategy ">
+    <Accordion title="Pre-sorted Batch Strategy">
+        Overview:
+        - Create three collections to group operations by type:
+            - `putOps`: For `PUT` operations, organized by table name
+            - `deleteOps`: For `DELETE` operations, organized by table name
+            - `patchOps`: For `PATCH` operations (partial updates)
+      
+        -  Loop through all operations, sort them into the three collections, and then process all operations in batches.
+
         ```typescript {8-11, 17-20, 23, 26-29, 32-53, 56, 72}
         async uploadData(database: AbstractPowerSyncDatabase): Promise<void> {
             const transaction = await database.getNextCrudTransaction();