Merge pull request #2266 from shanberg/block-perf-by-view

Improve block performance

src/cljs/athens/views/blocks/content.cljs

@@ -266,6 +266,7 @@
                                 :on-mouse-enter (fn [e] (textarea-mouse-enter e uid))
                                 :on-mouse-down  (fn [e] (textarea-mouse-down e uid))}])
           [parse-and-render @read-value (or original-uid uid)]]
-         [autocomplete-search/inline-search-el block state-hooks last-event]
-         [autocomplete-slash/slash-menu-el block last-event]]))))
+         (when editing?
+           [autocomplete-search/inline-search-el block state-hooks last-event]
+           [autocomplete-slash/slash-menu-el block last-event])]))))
 

src/cljs/athens/views/blocks/editor.cljs

@@ -7,6 +7,7 @@
     ["/components/EmojiPicker/EmojiPicker"     :refer [EmojiPickerPopoverContent]]
     ["/components/References/InlineReferences" :refer [ReferenceGroup ReferenceBlock]]
     ["@chakra-ui/react"                        :refer [VStack PopoverAnchor Popover Button Breadcrumb BreadcrumbItem BreadcrumbLink HStack]]
+    ["react-intersection-observer"             :refer [useInView]]
     [athens.common-db                          :as common-db]
     [athens.db                                 :as db]
     [athens.events.inline-refs                 :as inline-refs.events]
@@ -171,6 +172,7 @@
                           key
                           properties
                           _refs]} (reactive/get-reactive-block-document [:block/uid uid])
+            [ref in-view?]        (useInView {:delay 250})
             reactions-enabled?    (:reactions @feature-flags)
             user-id               (or (:username @(rf/subscribe [:presence/current-user]))
                                       ;; We use empty string for when there is no user information, like in PKM.
@@ -179,19 +181,19 @@
                                        (props->reactions properties))]
 
         [:<>
-         [:div.block-body
+         [:div.block-body {:ref ref}
           (when (and children?
                      (or (seq children)
                          (seq properties)))
-            [:> Toggle {:isOpen  (if (or (and (true? linked-ref) @linked-ref-open?)
-                                         (and (false? linked-ref) open))
-                                   true
-                                   false)
-                        :onClick (fn [e]
-                                   (.. e stopPropagation)
-                                   (if (true? linked-ref)
-                                     (rf/dispatch [::linked-ref.events/toggle-open! uid])
-                                     (toggle uid (not open))))}])
+            (when in-view? [:> Toggle {:isOpen  (if (or (and (true? linked-ref) @linked-ref-open?)
+                                                        (and (false? linked-ref) open))
+                                                  true
+                                                  false)
+                                       :onClick (fn [e]
+                                                  (.. e stopPropagation)
+                                                  (if (true? linked-ref)
+                                                    (rf/dispatch [::linked-ref.events/toggle-open! uid])
+                                                    (toggle uid (not open))))}]))
 
           (when key
             [:> PropertyName {:name    (:node/title key)
@@ -209,7 +211,7 @@
 
           [:> Popover {:isOpen @show-emoji-picker?
                        :placement "bottom-end"
-                       :onOpen #(js/console.log "tried to open")
+                       :isLazy true
                        :onClose hide-emoji-picker-fn}
 
            [:> PopoverAnchor
@@ -231,30 +233,32 @@
                         :on-drag-start          (fn [e] (bullet-drag-start e uid))
                         :on-drag-end            (fn [e] (bullet-drag-end e uid))
                         :unreadNotification     (actions/unread-notification? properties)}]]
-           (when reactions-enabled?
+           (when (and reactions-enabled? in-view?)
              [:> EmojiPickerPopoverContent
               {:onClose hide-emoji-picker-fn
                :onEmojiSelected (fn [e] (toggle-reaction [:block/uid uid] (.. e -detail -unicode) user-id))}])]
 
-
-
-
           [content/block-content-el block-o state-hooks]
 
-          (when reactions [:> Reactions {:reactions (clj->js reactions)
-                                         :currentUser user-id
-                                         :onToggleReaction (partial toggle-reaction [:block/uid uid])}])
+          (when (and
+                  in-view?
+                  reactions) [:> Reactions {:reactions (clj->js reactions)
+                                            :currentUser user-id
+                                            :onToggleReaction (partial toggle-reaction [:block/uid uid])}])
 
           ;; Show comments when the toggle is on
           (when (and @show-comments?
+                     in-view?
                      open
                      (or @show-textarea
                          (comments/get-comment-thread-uid @db/dsdb uid)))
             [inline-comments/inline-comments (comments/get-comments-in-thread @db/dsdb (comments/get-comment-thread-uid @db/dsdb uid)) uid false])
 
-          [presence/inline-presence-el uid]
+          (when in-view? [presence/inline-presence-el uid])
 
-          (when (and (> (count _refs) 0) (not= :block-embed? opts))
+          (when (and
+                  in-view?
+                  (> (count _refs) 0) (not= :block-embed? opts))
             [block-refs-count-el
              (count _refs)
              (fn [e]
@@ -265,12 +269,14 @@
 
          ;; Inline refs
          (when (and (> (count _refs) 0)
+                    in-view?
                     (not= :block-embed? opts)
                     @inline-refs-open?)
            [inline-linked-refs-el block-el uid])
 
          ;; Properties
          (when (and @enable-properties?
+                    in-view?
                     (or (and (true? linked-ref) @linked-ref-open?)
                         (and (false? linked-ref) open)))
            (for [prop (common-db/sort-block-properties properties)]

src/cljs/athens/views/blocks/types/default.cljs

@@ -371,7 +371,7 @@
 
               (when (= @drag-target :before) [drop-area-indicator/drop-area-indicator {:placement "above"}])
 
-              [editor/editor-component
+              [:f> editor/editor-component
                block-el
                block-o
                true

src/js/components/Block/Container.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Box, useMergeRefs } from "@chakra-ui/react";
+import { Box, AlertIcon, Alert, AlertTitle, useMergeRefs } from "@chakra-ui/react";
 import { withErrorBoundary } from "react-error-boundary";
 import { useContextMenu } from '@/utils/useContextMenu';
 
-const ERROR_MESSAGE = "An error occurred while rendering this block.";
+const ERROR_MESSAGE = <Alert ml={4} status='error'><AlertIcon /><AlertTitle>An error occurred while rendering this block.</AlertTitle></Alert>;
 
 // Don't open the context menu on these elements
 const CONTAINER_CONTEXT_MENU_FILTERED_TAGS = ["A", "BUTTON", "INPUT", "TEXTAREA", "LABEL", "VIDEO", "EMBED", "IFRAME", "IMG"];
@@ -52,7 +52,6 @@ const _Container = React.forwardRef(({ children, isDragging, isHidden, isSelecte
         isHoveredNotChild && "is-hovered-not-child",
         hasPresence ? "is-presence" : "",
       ].filter(Boolean).join(' ')}
-      display="flex"
       lineHeight="2em"
       position="relative"
       borderRadius="0.125rem"

src/js/theme/theme.js

@@ -230,6 +230,14 @@ const components = {
             color: "var(--toast-color)",
           }
         })
+      },
+      subtle: {
+        container: {
+          borderRadius: "md"
+        },
+        title: {
+          fontWeight: "normal"
+        },
       }
     }
   },