Improve hot reloading (#16349)

shadow-cljs.edn

@@ -44,15 +44,16 @@
    ;; the target files (a.k.a hot reload). When false, you can manually
    ;; reload by calling `shadow.cljs.devtools.api/watch-compile-all!`.
    :devtools {:autobuild #shadow/env ["SHADOW_AUTOBUILD_ENABLED" :default true :as :bool]}
-   :dev {:devtools {:after-load   status-im2.setup.hot-reload/reload
-                    :build-notify status-im2.setup.hot-reload/build-notify
-                    :preloads     [re-frisk-remote.preload
-                                   ;; In order to use component test helpers in
-                                   ;; the REPL we need to preload namespaces
-                                   ;; that are not normally required by
-                                   ;; production code, such as
-                                   ;; @testing-library/react-native.
-                                   test-helpers.component]}
+   :dev {:devtools {:before-load-async status-im2.setup.hot-reload/before-reload
+                    :after-load-async  status-im2.setup.hot-reload/reload
+                    :build-notify      status-im2.setup.hot-reload/build-notify
+                    :preloads          [re-frisk-remote.preload
+                                        ;; In order to use component test helpers in
+                                        ;; the REPL we need to preload namespaces
+                                        ;; that are not normally required by
+                                        ;; production code, such as
+                                        ;; @testing-library/react-native.
+                                        test-helpers.component]}
          :closure-defines
          {status-im2.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
           status-im2.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"

src/status_im2/setup/hot_reload.cljs

@@ -3,23 +3,41 @@
             [react-native.core :as rn]
             [reagent.core :as reagent]))
 
-(def cnt (reagent/atom 0))
+(defonce cnt (reagent/atom 0))
+(defonce reload-locked? (atom false))
+(defonce reload-interval (atom nil))
 (defonce warning? (reagent/atom false))
 (defonce visible (reagent/atom false))
-(defonce timeout (reagent/atom false))
 (defonce label (reagent/atom ""))
 
 (defn reload
   []
-  (when @timeout (js/clearTimeout @timeout))
-  (reset! timeout (js/setTimeout #(reset! visible false) 500))
+  (js/setTimeout #(reset! visible false) 500)
+  (js/setTimeout #(reset! reload-locked? false) 3000)
   (reset! warning? false)
   (reset! visible true)
   (reset! label "reloading UI")
   (re-frame/clear-subscription-cache!)
   (swap! cnt inc))
 
-(defn build-competed
+(defn before-reload
+  [done]
+  (when @reload-interval (js/clearInterval @reload-interval))
+  (if @reload-locked?
+    (reset!
+      reload-interval
+      (js/setInterval
+       (fn []
+         (when-not @reload-locked?
+           (js/clearInterval @reload-interval)
+           (reset! reload-locked? true)
+           (done)))
+       500))
+    (do
+      (reset! reload-locked? true)
+      (done))))
+
+(defn build-completed
   []
   (reset! label "reloading code")
   (reset! warning? false)
@@ -47,7 +65,7 @@
             (and (= :build-complete type) (seq (:warnings info))))
         (build-failed (:warnings info))
         (= :build-complete type)
-        (build-competed)))
+        (build-completed)))
 
 (defn reload-view
   [_]