suspense.cljs

(ns grove.suspense
  (:require
   [shadow.experiments.grove :as sg :refer [defc <<]]
   [shadow.experiments.grove.runtime :as rt]
   [shadow.experiments.grove.events :as ev]
   [shadow.experiments.grove.db :as db]
   [shadow.experiments.grove.local :as local]))

(defonce data-ref
  (-> {:initialised? true
       :random "whatever"
       :current [:id 1]
       [:id 1] "block 1"}
    (db/configure {})
    (atom)))

(defonce rt-ref
  (rt/prepare {} data-ref ::runtime-id))

(defc ui-block [^:stable ident]
  (bind block (sg/query-ident ident))
  (render (str block)))


(defc ui-root* []
  (bind {:keys [initialised? random] :as init?}
    (sg/query-root [:initialised? :random]))

  (render (<<
            [:div random]
            [:div (str initialised?)]
            [:div (str init?)])))

(defc ui-root []
  (bind {:keys [current]} (sg/query-root [:current]))

  (render
    (<<
      [:button {:on-click {:e ::suspend}} "suspend!"]

      (sg/suspense {:timeout 300
                    :fallback (str "suspended...")}
        ;; on init render, there is nothing to suspend, so fallback
        ;; will kick in regardless of timeout
        (ui-root*))

      (sg/suspense {:timeout 1000
                    :fallback (str "suspended node...")}
        (<< (str current)
          (ui-block current))))))

(ev/reg-event rt-ref ::suspend
  (fn [env _]
    (-> env
      (assoc-in [:db :current] [:id 2])
      (assoc-in [:db [:id 2]] :db/loading))))

(def root-el
  (js/document.getElementById "root"))

(defn start []
  (sg/render rt-ref root-el (ui-root)))

(defn ^:dev/after-load reload []
  (start))

(defn init []
  (local/init! rt-ref)
  (start))