Merge branch 'dev' into hide-completed-proposals

1Hive · Oct 9, 2024 · 8645469 · 8645469
2 parents ff2a635 + add794d
commit 8645469
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 23 deletions.
diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx
@@ -21,6 +21,7 @@ import { ConvictionBarChart } from "@/components/Charts/ConvictionBarChart";
 import { DisputeButton } from "@/components/DisputeButton";
 import { LoadingSpinner } from "@/components/LoadingSpinner";
 import MarkdownWrapper from "@/components/MarkdownWrapper";
+import { Skeleton } from "@/components/Skeleton";
 import { usePubSubContext } from "@/contexts/pubsub.context";
 import { useChainIdFromPath } from "@/hooks/useChainIdFromPath";
 import { useContractWriteWithConfirmations } from "@/hooks/useContractWriteWithConfirmations";
@@ -166,9 +167,11 @@ export default function Page({
  <div className="flex w-full flex-col gap-8">
  <div>
  <div className="mb-4 flex flex-col items-start gap-4 sm:mb-2 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
- <h2>
- {metadata?.title} #{proposalIdNumber.toString()}
- </h2>
+ <Skeleton isLoading={!metadata} className="!w-96 h-8">
+ <h2>
+ {metadata?.title} #{proposalIdNumber.toString()}
+ </h2>
+ </Skeleton>
  <Badge type={proposalType} />
  </div>
  <div className="flex items-center justify-between gap-4 sm:justify-start">
@@ -181,9 +184,13 @@ export default function Page({
  </p>
  </div>
  </div>
- <MarkdownWrapper>
- {metadata?.description ?? "No description found"}
- </MarkdownWrapper>
+ <div>
+ <Skeleton rows={5} isLoading={!metadata}>
+ <MarkdownWrapper>
+ {metadata?.description ?? "No description found"}
+ </MarkdownWrapper>
+ </Skeleton>
+ </div>
  <div className="flex justify-between flex-wrap gap-2">
  <div className="flex flex-col gap-2">
  {!isSignalingType && (

diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx
@@ -31,6 +31,7 @@ import {
 } from "@/components";
 import { LoadingSpinner } from "@/components/LoadingSpinner";
 import MarkdownWrapper from "@/components/MarkdownWrapper";
+import { Skeleton } from "@/components/Skeleton";
 import { TokenGardenFaucet } from "@/components/TokenGardenFaucet";
 import { isProd } from "@/configs/isProd";
 import { QUERY_PARAMS } from "@/constants/query-params";
@@ -359,9 +360,9 @@ export default function Page({
  <section ref={covenantSectionRef} className="section-layout">
  <h2 className="mb-4">Covenant</h2>
  {registryCommunity?.covenantIpfsHash ?
- covenant ?
- <MarkdownWrapper>{covenant}</MarkdownWrapper>
- : <LoadingSpinner />
+ <Skeleton isLoading={!covenant} rows={5}>
+ <MarkdownWrapper>{covenant!}</MarkdownWrapper>
+ </Skeleton>
  : <p className="italic">No covenant was submitted.</p>}
  <div className="mt-10 flex justify-center">
  <Image

diff --git a/apps/web/components/PoolHeader.tsx b/apps/web/components/PoolHeader.tsx
@@ -24,6 +24,7 @@ import { EthAddress } from "./EthAddress";
 import PoolEditForm from "./Forms/PoolEditForm";
 import MarkdownWrapper from "./MarkdownWrapper";
 import { Modal } from "./Modal";
+import { Skeleton } from "./Skeleton";
 import { Statistic } from "./Statistic";
 import { blueLand, grassLarge } from "@/assets";
 import { chainConfigMap } from "@/configs/chains";
@@ -242,12 +243,12 @@ export default function PoolHeader({
  <section className="section-layout flex flex-col gap-0">
  <header className="mb-2 flex flex-col">
  <div className="flex justify-between flex-wrap">
- <div>
- <h2>{ipfsResult?.title}</h2>
- <h5 className="">#{poolId}</h5>
- </div>
- {(isCouncilMember ?? isCouncilSafe) && (
-  // true
+ <Skeleton isLoading={!ipfsResult} className="!w-96 h-8">
+ <h2>
+  {ipfsResult?.title} #{poolId}
+  </h2>
+ </Skeleton>
+ {(!!isCouncilMember || isCouncilSafe) && (
  <div className="flex gap-2">
  <Button
  btnStyle="outline"
@@ -315,9 +316,11 @@ export default function PoolHeader({
  />
  </Modal>
  </header>
- <MarkdownWrapper>
- {ipfsResult?.description ?? "No description found"}
- </MarkdownWrapper>
+ <Skeleton rows={5} isLoading={!ipfsResult}>
+ <MarkdownWrapper>
+ {ipfsResult?.description ?? "No description found"}
+ </MarkdownWrapper>
+ </Skeleton>
  <div className="mb-10 mt-8 flex items-start justify-between gap-8 flex-wrap">
  <div className="flex flex-col gap-2 max-w-fit">
  <Statistic label="pool type">

diff --git a/apps/web/components/Skeleton.tsx b/apps/web/components/Skeleton.tsx
@@ -1,11 +1,26 @@
 import React, { ReactNode } from "react";
 
-type Props = { className?: string; children: ReactNode; isLoading: boolean };
+type Props = {
+ className?: string;
+ children: ReactNode;
+ isLoading: boolean;
+ rows?: number;
+};
 
-export const Skeleton = ({ className, children, isLoading }: Props) => {
+export const Skeleton = ({
+ className,
+ children,
+ isLoading,
+ rows = 1,
+}: Props) => {
  return isLoading ?
- <div
- className={`[--fallback-b3:#f0f0f0] skeleton h-4 w-full my-1 rounded-md ${className}`}
- />
+ <div className="flex flex-col gap-1">
+ {Array(rows).fill(0).map((_, i) => (
+ <div
+ key={i}
+ className={`[--fallback-b3:#f0f0f0] skeleton h-4 w-full my-1 rounded-md ${className}`}
+ />
+ ))}
+ </div>
  : <>{children}</>;
 };