Show loading spinner until data ready on profile page

district0x · Dec 16, 2024 · 262243b · 262243b
1 parent 45144ae
commit 262243b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git a/ui/src/ethlance/ui/component/loading_spinner.cljs b/ui/src/ethlance/ui/component/loading_spinner.cljs
@@ -5,3 +5,9 @@
   []
   [:div.loading-spinner
    [:img {:src "/images/svg/ethlance_spinner.svg"}]])
+
+(defn c-spinner-until-data-ready
+  [loading-states component-when-loading-finished]
+  (if (not-every? false? loading-states)
+    [c-loading-spinner]
+    component-when-loading-finished))
diff --git a/ui/src/ethlance/ui/page/job_detail.cljs b/ui/src/ethlance/ui/page/job_detail.cljs
@@ -9,7 +9,7 @@
     [ethlance.ui.component.button :refer [c-button c-button-label]]
     [ethlance.ui.component.carousel :refer [c-carousel c-feedback-slide]]
     [ethlance.ui.component.info-message :refer [c-info-message]]
-    [ethlance.ui.component.loading-spinner :refer [c-loading-spinner]]
+    [ethlance.ui.component.loading-spinner :refer [c-spinner-until-data-ready]]
     [ethlance.ui.component.main-layout :refer [c-main-layout]]
     [ethlance.ui.component.pagination :as pagination]
     [ethlance.ui.component.profile-image :refer [c-profile-image]]
@@ -29,12 +29,6 @@
     [re-frame.core :as re]))
 
 
-(defn spinner-until-data-ready
-  [loading-states component-when-loading-finished]
-  (if (not-every? false? loading-states)
-    [c-loading-spinner]
-    component-when-loading-finished))
-
 (defn hidden-until-data-ready
   [loading-states component-when-loading-finished]
   (when (every? false? loading-states)
@@ -679,7 +673,7 @@
           [loading? processing?] (map @query-results [:graphql/loading? :graphql/preprocessing?])
           results (:job @query-results)]
       [c-main-layout {:container-opts {:class :job-detail-main-container}}
-       [spinner-until-data-ready [loading? processing?]
+       [c-spinner-until-data-ready [loading? processing?]
         [c-job-info-section results]]
        [hidden-until-data-ready [loading? processing?] [c-proposals-section results]]
        [hidden-until-data-ready [loading? processing?] [c-arbitrations-section contract-address]]

diff --git a/ui/src/ethlance/ui/page/profile.cljs b/ui/src/ethlance/ui/page/profile.cljs
@@ -9,6 +9,7 @@
     [ethlance.shared.utils :refer [ilike=]]
     [ethlance.ui.component.button :refer [c-button c-button-label]]
     [ethlance.ui.component.carousel :refer [c-carousel c-feedback-slide]]
+    [ethlance.ui.component.loading-spinner :refer [c-spinner-until-data-ready]]
     [ethlance.ui.component.main-layout :refer [c-main-layout]]
     [ethlance.ui.component.pagination :refer [c-pagination-ends]]
     [ethlance.ui.component.profile-image :refer [c-profile-image]]
@@ -271,6 +272,7 @@
                       :user/name
                       :user/profile-image]]]]]]]]
         results (re/subscribe [::gql/query {:queries [query]}])
+        [loading? processing?] (map @results [:graphql/loading? :graphql/preprocessing?])
         name (get-in @results [:candidate :user :user/name])
         location (get-in @results [:candidate :user :user/country])
         professional-title (get-in @results [:candidate :candidate/professional-title])
@@ -282,21 +284,22 @@
         rating {:average (get-in @results [:candidate :candidate/rating]) :count (count feedback-list)}
         has-candidate-profile? (not (nil? biography))]
     [:<>
-     (if has-candidate-profile?
-       [:div.candidate-profile
-        [:div.title
-         [:div.profile-image
-          [c-profile-image {:src image-url}]]
-         [:div.name name]
-         [:div.detail professional-title]]
-        [:div.biography biography]
-        [c-rating-box rating]
-        [:div.location location]
-        [:div.detail-listing
-         [c-tag-list "Languages" languages]
-         [c-tag-list "Skills" skills]]]
-
-       [c-missing-profile-notification :candidate])
+     [c-spinner-until-data-ready [loading? processing?]
+      (if has-candidate-profile?
+        [:div.candidate-profile
+         [:div.title
+          [:div.profile-image
+           [c-profile-image {:src image-url}]]
+          [:div.name name]
+          [:div.detail professional-title]]
+         [:div.biography biography]
+         [c-rating-box rating]
+         [:div.location location]
+         [:div.detail-listing
+          [c-tag-list "Languages" languages]
+          [c-tag-list "Skills" skills]]]
+
+        [c-missing-profile-notification :candidate])]
      (when has-candidate-profile? (c-job-activity :candidate))
      (when has-candidate-profile? [c-invite-candidate])
      (c-feedback-listing professional-title feedback-list)]))