enhance: add skeleton loading

logseq · May 13, 2022 · 4d4ade5 · 4d4ade5
1 parent 8a8e3ee
commit 4d4ade5
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 17 deletions.
diff --git a/resources/css/common.css b/resources/css/common.css
@@ -715,6 +715,11 @@ li p:last-child,
   background-color: var(--ls-primary-background-color, #fff);
 }
 
+.bg-base-4 {
+  background-color: var(--ls-tertiary-background-color);
+}
+
+
 .pre-white-space {
   white-space: pre;
 }

diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs
@@ -286,7 +286,7 @@
                   (.share Share #js {:url url
                                      :title "Open PDF fils with your favorite app"}))))}
            title]
-          
+
           :else
           [:a.asset-ref {:ref @src} title])))))
 
@@ -862,7 +862,7 @@
 
           (mobile-util/is-native-platform?)
           (asset-link config label-text s metadata full_text)))
-      
+
       :else
       (asset-reference config label s))))
 
@@ -2406,7 +2406,6 @@
         ref-or-custom-query? (or ref? custom-query?)]
     (if (and ref-or-custom-query? (not (:ref-query-child? config)))
       (ui/lazy-visible
-       nil
        (fn []
          (block-container-inner state repo config block))
        nil)
@@ -2737,7 +2736,6 @@
   (ui/catch-error
    (ui/block-error "Query Error:" {:content (:query q)})
    (ui/lazy-visible
-    "loading ..."
     (fn [] (custom-query* config q))
     nil)))
 

diff --git a/src/main/frontend/components/journal.cljs b/src/main/frontend/components/journal.cljs
@@ -60,12 +60,12 @@
      (page/today-queries repo today? false)
 
      (rum/with-key
-       (reference/references title false)
+       (reference/references title)
        (str title "-refs"))]))
 
 (rum/defc journal-cp
   [journal]
-  (ui/lazy-visible nil (fn [] (journal-cp-inner journal)) nil))
+  (ui/lazy-visible (fn [] (journal-cp-inner journal)) nil))
 
 (rum/defc journals < rum/reactive
   [latest-journals]

diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs
@@ -394,7 +394,7 @@
        ;; referenced blocks
        [:div {:key "page-references"}
         (rum/with-key
-          (reference/references route-page-name sidebar?)
+          (reference/references route-page-name)
           (str route-page-name "-refs"))]
 
        (when-not block?

diff --git a/src/main/frontend/components/reference.cljs b/src/main/frontend/components/reference.cljs
@@ -166,13 +166,10 @@
               :title-trigger? true}))]]))))
 
 (rum/defc references
-  [page-name sidebar?]
+  [page-name]
   (ui/catch-error
    (ui/component-error "Linked References: Unexpected error")
    (ui/lazy-visible
-    (if (or sidebar? (gp-util/uuid-string? page-name))
-      nil
-      "loading references...")
     (fn []
       (references* page-name))
     nil)))

diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs
@@ -915,7 +915,7 @@
   {:init (fn [state]
            (assoc state
                   ::ref (atom nil)
-                  ::height (atom 1)))
+                  ::height (atom 100)))
    :did-mount (fn [state]
                 (let [observer (js/ResizeObserver. (fn [entries]
                                                      (let [entry (first entries)
@@ -925,17 +925,25 @@
                                                          (reset! *height height')))))]
                   (.observe observer @(::ref state)))
                 state)}
-  [state visible? content-fn loading-label]
+  [state visible? content-fn]
   [:div.lazy-visibility {:ref #(reset! (::ref state) %)
                          :style {:min-height @(::height state)}}
+
    (if visible?
      (when (fn? content-fn) (content-fn))
-     (when loading-label [:span.text-sm.font-medium
-                          loading-label]))])
+     [:div.shadow.rounded-md.p-4.w-full.mx-auto
+      [:div.animate-pulse.flex.space-x-4
+       [:div.flex-1.space-y-3.py-1
+        [:div.h-2.bg-base-4.rounded]
+        [:div.space-y-3
+         [:div.grid.grid-cols-3.gap-4
+          [:div.h-2.bg-base-4.rounded.col-span-2]
+          [:div.h-2.bg-base-4.rounded.col-span-1]]
+         [:div.h-2.bg-base-4.rounded]]]]])])
 
 (rum/defcs lazy-visible <
   (rum/local false ::visible?)
-  [state loading-label content-fn sensor-opts]
+  [state content-fn sensor-opts]
   (let [*visible? (::visible? state)]
     (visibility-sensor
      (merge
@@ -944,4 +952,4 @@
        :offset {:top -300
                 :bottom -300}}
       sensor-opts)
-     (lazy-visible-inner @*visible? content-fn loading-label))))
+     (lazy-visible-inner @*visible? content-fn))))