Add animated loading icon on publish button (#1778)

## Description

Add animated loading icon on publish button

ref #1715

<img width="335" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/23703173-1b64-4d9a-9635-f558b76249a0">


Todo:
- [x] -
https://discord.com/channels/955905230107738152/1117940560574021782

Errors are now aligned

<img width="347" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/6eb9bfe5-92b6-45b9-9783-b8cc20f25f39">



## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

---------

Co-authored-by: Oleg Isonen <oleg008@gmail.com>

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

@@ -571,6 +571,7 @@ const DomainItem = (props: {
 
             handleUpdateStatus();
           }}
+          isPublishing={props.isPublishing}
         />
       </Grid>
     </CollapsibleDomainSection>

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

@@ -10,10 +10,12 @@ export const Entri = ({
   dnsRecords,
   domain,
   onClose,
+  isPublishing,
 }: {
   dnsRecords: DnsRecord[];
   domain: string;
   onClose: (detail: EntriCloseDetail) => void;
+  isPublishing: boolean;
 }) => {
   entriGlobalStyles();
   const { error, isOpen, showDialog } = useEntri({
@@ -27,7 +29,7 @@ export const Entri = ({
       {error !== undefined && <Text color="destructive">{error}</Text>}
 
       <Button
-        disabled={isOpen}
+        disabled={isOpen || isPublishing}
         color="neutral"
         css={{ width: "100%", flexShrink: 0 }}
         onClick={() => {

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

@@ -270,6 +270,8 @@ const Publish = ({
     }
   }, [isPublishing, refresh]);
 
+  const isPublishInProgress = publishState !== "idle" || isPublishing;
+
   return (
     <Flex
       css={{
@@ -292,14 +294,12 @@ const Publish = ({
 
       <Tooltip
         content={
-          publishState !== "idle" || isPublishing
-            ? "Publish process in progress"
-            : undefined
+          isPublishInProgress ? "Publish process in progress" : undefined
         }
       >
         <Button
           color="positive"
-          disabled={publishState !== "idle" || isPublishing}
+          state={isPublishInProgress ? "pending" : undefined}
           onClick={() => {
             setIsPublishing(true);
 
@@ -323,6 +323,20 @@ const Publish = ({
   );
 };
 
+const ErrorText = ({ children }: { children: string }) => (
+  <Flex
+    css={{
+      m: theme.spacing[9],
+      overflowWrap: "anywhere",
+    }}
+    gap={2}
+    direction={"column"}
+  >
+    <Text color="destructive">{children}</Text>
+    <Text color="subtle">Please try again later</Text>
+  </Flex>
+);
+
 const Content = (props: { projectId: Project["id"] }) => {
   const [newDomains, setNewDomains] = useState(new Set<string>());
   const {
@@ -386,17 +400,7 @@ const Content = (props: { projectId: Project["id"] }) => {
     <>
       <ScrollArea>
         {projectSystemError !== undefined && (
-          <Flex
-            css={{
-              m: theme.spacing[9],
-              overflowWrap: "anywhere",
-            }}
-            gap={2}
-            direction={"column"}
-          >
-            <Text color="destructive">{projectSystemError}</Text>
-            <Text color="subtle">Please try again later</Text>
-          </Flex>
+          <ErrorText>{projectSystemError}</ErrorText>
         )}
 
         {projectData?.success && (
@@ -408,10 +412,6 @@ const Content = (props: { projectId: Project["id"] }) => {
           />
         )}
 
-        {domainSystemError !== undefined && (
-          <Text color="destructive">{domainSystemError}</Text>
-        )}
-
         {domainsResult?.success === true && (
           <Domains
             newDomains={newDomains}
@@ -421,15 +421,13 @@ const Content = (props: { projectId: Project["id"] }) => {
             isPublishing={isPublishing}
           />
         )}
+
+        {domainSystemError !== undefined && (
+          <ErrorText>{domainSystemError}</ErrorText>
+        )}
+
         {domainsResult?.success === false && (
-          <Label
-            css={{
-              overflowWrap: "anywhere",
-              color: theme.colors.foregroundDestructive,
-            }}
-          >
-            <div>{domainsResult.error}</div>
-          </Label>
+          <ErrorText>{domainsResult.error}</ErrorText>
         )}
       </ScrollArea>
 

packages/icons/package.json

@@ -8,8 +8,8 @@
   "scripts": {
     "dev": "build-package --watch",
     "build": "build-package",
-    "dts": "tsc --project tsconfig.dts.json",
-    "generate": "rm -fr src/__generated__ && NODE_OPTIONS='--loader=tsx' svgo-jsx svgo-jsx.config.ts && tsx svg-string.ts && pnpm prettier --write ./ ",
+    "dts": "tsc --declarationDir lib/types",
+    "generate": "rm -fr src/__generated__ && NODE_OPTIONS='--loader=tsx' svgo-jsx svgo-jsx.config.ts && tsx svg-string.ts && prettier --write ./",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "checks": "pnpm typecheck && pnpm lint",