From 3112a9df9d6ace4f90303ba362c36e9187dc3dc3 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Wed, 28 Aug 2024 10:26:24 -0700
Subject: [PATCH] extract loading

---
 web/src/components/IsPublicGroupSelector.tsx | 54 +++++++++-----------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/web/src/components/IsPublicGroupSelector.tsx b/web/src/components/IsPublicGroupSelector.tsx
index 448dbcf4e..b729a4125 100644
--- a/web/src/components/IsPublicGroupSelector.tsx
+++ b/web/src/components/IsPublicGroupSelector.tsx
@@ -89,6 +89,9 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
       {(!formikProps.values.is_public ||
         !isAdmin ||
         formikProps.values.groups.length > 0) &&
+      userGroupsIsLoading ? (
+        <div className="animate-pulse bg-gray-200 h-8 w-32 rounded"></div>
+      ) : (
         userGroups &&
         userGroups.length > 0 && (
           <>
@@ -114,19 +117,13 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
               name="groups"
               render={(arrayHelpers: ArrayHelpers) => (
                 <div className="flex gap-2 flex-wrap mb-4">
-                  {userGroupsIsLoading ? (
-                    <div className="animate-pulse bg-gray-200 h-8 w-32 rounded"></div>
-                  ) : (
-                    userGroups &&
-                    userGroups.map((userGroup: UserGroup) => {
-                      const ind = formikProps.values.groups.indexOf(
-                        userGroup.id
-                      );
-                      let isSelected = ind !== -1;
-                      return (
-                        <div
-                          key={userGroup.id}
-                          className={`
+                  {userGroups.map((userGroup: UserGroup) => {
+                    const ind = formikProps.values.groups.indexOf(userGroup.id);
+                    let isSelected = ind !== -1;
+                    return (
+                      <div
+                        key={userGroup.id}
+                        className={`
                         px-3 
                         py-1
                         rounded-lg 
@@ -137,22 +134,20 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
                         cursor-pointer 
                         ${isSelected ? "bg-background-strong" : "hover:bg-hover"}
                     `}
-                          onClick={() => {
-                            if (isSelected) {
-                              arrayHelpers.remove(ind);
-                            } else {
-                              arrayHelpers.push(userGroup.id);
-                            }
-                          }}
-                        >
-                          <div className="my-auto flex">
-                            <FiUsers className="my-auto mr-2" />{" "}
-                            {userGroup.name}
-                          </div>
+                        onClick={() => {
+                          if (isSelected) {
+                            arrayHelpers.remove(ind);
+                          } else {
+                            arrayHelpers.push(userGroup.id);
+                          }
+                        }}
+                      >
+                        <div className="my-auto flex">
+                          <FiUsers className="my-auto mr-2" /> {userGroup.name}
                         </div>
-                      );
-                    })
-                  )}
+                      </div>
+                    );
+                  })}
                 </div>
               )}
             />
@@ -162,7 +157,8 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
               className="text-error text-sm mt-1"
             />
           </>
-        )}
+        )
+      )}
     </div>
   );
 };