diff --git a/src/main/frontend/components/settings.cljs b/src/main/frontend/components/settings.cljs index ff3912dec1..0d3dd25654 100644 --- a/src/main/frontend/components/settings.cljs +++ b/src/main/frontend/components/settings.cljs @@ -910,6 +910,7 @@ (rum/defc settings-rtc-members [] (let [[invite-email set-invite-email!] (hooks/use-state "") + [loading? set-loading!] (hooks/use-state true) current-repo (state/get-current-repo) [users-info] (hooks/use-atom (:rtc/users-info @state/state)) users (get users-info current-repo) @@ -919,7 +920,10 @@ (when graph-uuid (rtc-handler/user-user-type :graph<->user/user-type} users] - [:div.flex.flex-row.items-center.gap-2 {:key (str "user-" user-name)} - [:div user-name] - (when user-email [:div.opacity-50.text-sm user-email]) - (when graph<->user-user-type [:div.opacity-50.text-sm (name graph<->user-user-type)])])] + (if loading? + (for [i (range 2)] + [:div.flex.flex-row.items-center.gap-2.pr-4 {:key (str "skeleton-" i)} + (shui/skeleton {:class "h-4 w-32"}) + (shui/skeleton {:class "h-4 w-full"})]) + (for [{user-name :user/name + user-email :user/email + graph<->user-user-type :graph<->user/user-type} users] + [:div.flex.flex-row.items-center.gap-2 {:key (str "user-" user-name)} + [:div user-name] + (when user-email [:div.opacity-50.text-sm user-email]) + (when graph<->user-user-type [:div.opacity-50.text-sm (name graph<->user-user-type)])]))] [:div.flex.flex-col.gap-4.mt-4 (shui/input {:placeholder "Email address"