Merge pull request #9998 from kashaf-ansari-dev/fix-9967-linking-note-blocks-loading-state

mobile: prevent upgrade prompt flash in note block linking list

apps/mobile/app/components/sheets/link-note/index.tsx

@@ -28,7 +28,7 @@ import { NativeEvents } from "@notesnook/editor-mobile/src/utils/native-events";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { TextInput, View } from "react-native";
+import { ActivityIndicator, TextInput, View } from "react-native";
 import { FlatList } from "react-native-actions-sheet";
 import { db } from "../../../common/database";
 import { useDBItem } from "../../../hooks/use-db-item";
@@ -40,6 +40,8 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import Navigation from "../../../services/navigation";
+import { useUserStore } from "../../../stores/use-user-store";
 
 const ListNoteItem = ({
   id,
@@ -158,6 +160,7 @@ export default function LinkNote(props: {
 
   const [selectedNote, setSelectedNote] = useState<Note>();
   const [selectedNodeId, setSelectedNodeId] = useState<string>();
+  const [blocksLoading, setBlocksLoading] = useState(false);
 
   useEffect(() => {
     db.notes.all.sorted(db.settings.getGroupOptions("notes")).then((notes) => {
@@ -206,10 +209,12 @@ export default function LinkNote(props: {
 
   const onSelectNote = async (note: Note) => {
     setSelectedNote(note);
+    setBlocksLoading(true);
     inputRef.current?.clear();
     setTimeout(async () => {
       nodesRef.current = await db.notes.contentBlocks(note.id);
       setNodes(nodesRef.current);
+      setBlocksLoading(false);
     });
     // Fetch and set note's nodes.
   };
@@ -224,6 +229,7 @@ export default function LinkNote(props: {
     <View
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
+        paddingBottom: DefaultAppStyles.GAP,
         minHeight: "100%",
         maxHeight: "100%"
       }}
@@ -330,6 +336,9 @@ export default function LinkNote(props: {
           windowSize={3}
           keyExtractor={(item) => item.id}
           ListEmptyComponent={
+            !blockLinking || blocksLoading ? (
+              <ActivityIndicator size={25} color={colors.primary.accent} />
+            ) : !blockLinking.isAllowed ? (
               <View
                 style={{
                   gap: DefaultAppStyles.GAP_VERTICAL,
@@ -350,8 +359,19 @@ export default function LinkNote(props: {
                     width: "100%"
                   }}
                   type="accent"
+                  onPress={() => {
+                    Navigation.navigate("PayWall", {
+                      context: useUserStore.getState().user
+                        ? "logged-in"
+                        : "logged-out",
+                      canGoBack: true
+                    });
+
+                    props.close?.();
+                  }}
                 />
               </View>
+            ) : null
           }
           data={blockLinking?.isAllowed ? nodes : []}
         />