feat: Publish countdown (#5498)

## Description

Since publish often takes 1 minute, this should help to reduce a
perceived wait time, because it feels longer than one minute when you
don't see the time

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/features/topbar/publish.tsx

@@ -294,6 +294,34 @@ const $usedProFeatures = computed(
   }
 );
 
+const usePublishCountdown = (isPublishing: boolean) => {
+  const [countdown, setCountdown] = useState<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (isPublishing === false) {
+      setCountdown(undefined);
+      return;
+    }
+
+    setCountdown(60);
+
+    const interval = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev === undefined || prev <= 0) {
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isPublishing]);
+
+  return countdown;
+};
+
 const Publish = ({
   project,
   timesLeft,
@@ -313,6 +341,7 @@ const Publish = ({
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [hasSelectedDomains, setHasSelectedDomains] = useState(false);
   const hasProPlan = useStore($userPlanFeatures).hasProPlan;
+  const countdown = usePublishCountdown(isPublishing);
 
   useEffect(() => {
     if (hasProPlan === false) {
@@ -469,6 +498,8 @@ const Publish = ({
     : false;
 
   const isPublishInProgress = isPublishing || hasPendingState;
+  const showPendingState =
+    isPublishInProgress && (countdown === undefined || countdown === 0);
 
   return (
     <Flex gap={2} shrink={false} direction={"column"}>
@@ -487,10 +518,12 @@ const Publish = ({
           ref={buttonRef}
           formAction={handlePublish}
           color="positive"
-          state={isPublishInProgress ? "pending" : undefined}
+          state={showPendingState ? "pending" : undefined}
           disabled={hasSelectedDomains === false || disabled}
         >
-          Publish
+          {countdown !== undefined && countdown > 0
+            ? `Publishing (${countdown}s)`
+            : "Publish"}
         </Button>
       </Tooltip>
     </Flex>