Add spinner (#987)

web/components/groups/group-overview.tsx

@@ -37,6 +37,7 @@ import { REFERRAL_AMOUNT } from 'common/economy'
 import toast from 'react-hot-toast'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { PostCard } from '../post-card'
+import { LoadingIndicator } from '../loading-indicator'
 
 const MAX_TRENDING_POSTS = 6
 
@@ -140,93 +141,97 @@ function GroupOverviewPinned(props: {
     setOpen(false)
   }
 
-  return isEditable || pinned.length > 0 ? (
-    <>
-      <Row className="mb-3 items-center justify-between">
-        <SectionHeader label={'Pinned'} />
-        {isEditable && (
-          <Button
-            color="gray"
-            size="xs"
-            onClick={() => {
-              setEditMode(!editMode)
-            }}
-          >
-            {editMode ? (
-              'Done'
-            ) : (
-              <>
-                <PencilIcon className="inline h-4 w-4" />
-                Edit
-              </>
-            )}
-          </Button>
-        )}
-      </Row>
+  return isEditable || (group.pinnedItems && group.pinnedItems.length > 0) ? (
+    pinned.length > 0 || isEditable ? (
       <div>
-        <Masonry
-          breakpointCols={{ default: 2, 768: 1 }}
-          className="-ml-4 flex w-auto"
-          columnClassName="pl-4 bg-clip-padding"
-        >
-          {pinned.length == 0 && !editMode && (
-            <div className="flex flex-col items-center justify-center">
-              <p className="text-center text-gray-400">
-                No pinned items yet. Click the edit button to add some!
-              </p>
-            </div>
-          )}
-          {pinned.map((element, index) => (
-            <div className="relative my-2">
-              {element}
-
-              {editMode && (
-                <CrossIcon
-                  onClick={() => {
-                    const newPinned = group.pinnedItems.filter((item) => {
-                      return item.itemId !== group.pinnedItems[index].itemId
-                    })
-                    updateGroup(group, { pinnedItems: newPinned })
-                  }}
-                />
+        <Row className="mb-3 items-center justify-between">
+          <SectionHeader label={'Pinned'} />
+          {isEditable && (
+            <Button
+              color="gray"
+              size="xs"
+              onClick={() => {
+                setEditMode(!editMode)
+              }}
+            >
+              {editMode ? (
+                'Done'
+              ) : (
+                <>
+                  <PencilIcon className="inline h-4 w-4" />
+                  Edit
+                </>
               )}
-            </div>
-          ))}
-          {editMode && group.pinnedItems && pinned.length < 6 && (
-            <div className=" py-2">
-              <Row
-                className={
-                  'relative gap-3 rounded-lg border-4 border-dotted p-2 hover:cursor-pointer hover:bg-gray-100'
-                }
-              >
-                <button
-                  className="flex w-full justify-center"
-                  onClick={() => setOpen(true)}
-                >
-                  <PlusCircleIcon
-                    className="h-12 w-12 text-gray-600"
-                    aria-hidden="true"
-                  />
-                </button>
-              </Row>
-            </div>
+            </Button>
           )}
-        </Masonry>
+        </Row>
+        <div>
+          <Masonry
+            breakpointCols={{ default: 2, 768: 1 }}
+            className="-ml-4 flex w-auto"
+            columnClassName="pl-4 bg-clip-padding"
+          >
+            {pinned.length == 0 && !editMode && (
+              <div className="flex flex-col items-center justify-center">
+                <p className="text-center text-gray-400">
+                  No pinned items yet. Click the edit button to add some!
+                </p>
+              </div>
+            )}
+            {pinned.map((element, index) => (
+              <div className="relative my-2">
+                {element}
+
+                {editMode && (
+                  <CrossIcon
+                    onClick={() => {
+                      const newPinned = group.pinnedItems.filter((item) => {
+                        return item.itemId !== group.pinnedItems[index].itemId
+                      })
+                      updateGroup(group, { pinnedItems: newPinned })
+                    }}
+                  />
+                )}
+              </div>
+            ))}
+            {editMode && group.pinnedItems && pinned.length < 6 && (
+              <div className=" py-2">
+                <Row
+                  className={
+                    'relative gap-3 rounded-lg border-4 border-dotted p-2 hover:cursor-pointer hover:bg-gray-100'
+                  }
+                >
+                  <button
+                    className="flex w-full justify-center"
+                    onClick={() => setOpen(true)}
+                  >
+                    <PlusCircleIcon
+                      className="h-12 w-12 text-gray-600"
+                      aria-hidden="true"
+                    />
+                  </button>
+                </Row>
+              </div>
+            )}
+          </Masonry>
+        </div>
+        <PinnedSelectModal
+          open={open}
+          group={group}
+          posts={posts}
+          setOpen={setOpen}
+          title="Pin a post or market"
+          description={
+            <div className={'text-md my-4 text-gray-600'}>
+              Pin posts or markets to the overview of this group.
+            </div>
+          }
+          onSubmit={onSubmit}
+        />
       </div>
-      <PinnedSelectModal
-        open={open}
-        group={group}
-        posts={posts}
-        setOpen={setOpen}
-        title="Pin a post or market"
-        description={
-          <div className={'text-md my-4 text-gray-600'}>
-            Pin posts or markets to the overview of this group.
-          </div>
-        }
-        onSubmit={onSubmit}
-      />
-    </>
+    ) : (
+      <LoadingIndicator />
+    )
   ) : (
     <></>
   )