Fork me on GitHub
#cljsrn
<
2017-10-26
>
manu07:10:19

Hi! how do you manage waiting data from the server before component has rendered? did someone use activityIndicator? thx 🙂

danielneal07:10:21

Yeah, I show some text and activityindicator while I'm waiting for data for the server

manu08:10:51

It's not clear to me how to use the activityIndicator and where to fetch the data.. can you provide an example or a link to a repository that use it? thx 🙂

danielneal09:10:43

Hmm I use reframe, so when e.g. I navigate to a view, or do something that means I need more data, I dispatch an event. The event puts a "loading" state in the db, and uses the http-xhrio effect to call the server. The view subscribes to the relevant bit of the db. Because it sees a loading state, it shows the activity indicator. When the request returns, I update state in the db with the new data, and remove the "loading" state. The view now sees the state is not loading, and will show the data, not the activity indicator.

danielneal09:10:22

How you approach data fetching depends on the architecture of your application

danielneal09:10:24

(defn search-view []
  (let [{:keys [loading? search-results]} @(subscribe [:search-results])]
    [rn/view
     [rn/input {:on-change #(dispatch [:search %])}]
     (if loading?
       [rn/activity-indicator]
       (into [rn/view (for [result search-results]
                        [rn/text (:name result)])]))]))

(reg-sub
  :search-results
  (fn [db]
    (get db :search-results)))

(reg-event-fx
  :search
  (fn [{:keys [db]} [_ query]]
    {:http-xhrio {:url ...
                  :on-success [:search/success]}
     :db (assoc-in db [:search-results :loading?] true)}))

(reg-event-db
  :search/success
  (fn [db [_ response]]
    (let [results (get response :body)]
      (assoc db :search-results {:loading? false
                                 :search-results results}))))

danielneal09:10:30

This is the kind of thing I'm talking about

danielneal09:10:56

Note NOT REAL CODE

manu09:10:18

Thanks this is a good idea 😄