chore: Export improvements (#4617)

* wip

* i18n

app/components/Spinner.tsx

@@ -1,7 +1,11 @@
 import * as React from "react";
 import styled from "styled-components";
 
-export default function Spinner(props: React.HTMLAttributes<HTMLOrSVGElement>) {
+type Props = React.HTMLAttributes<HTMLOrSVGElement> & {
+  color?: string;
+};
+
+export default function Spinner({ color, ...props }: Props) {
   return (
     <SVG
       width="16px"
@@ -11,6 +15,7 @@ export default function Spinner(props: React.HTMLAttributes<HTMLOrSVGElement>) {
       {...props}
     >
       <Circle
+        $color={color}
         fill="none"
         strokeWidth="2"
         strokeLinecap="round"
@@ -36,7 +41,7 @@ const SVG = styled.svg`
   margin: 4px;
 `;
 
-const Circle = styled.circle`
+const Circle = styled.circle<{ $color?: string }>`
   @keyframes dash {
     0% {
       stroke-dashoffset: 47;
@@ -51,7 +56,7 @@ const Circle = styled.circle`
     }
   }
 
-  stroke: ${(props) => props.theme.textSecondary};
+  stroke: ${(props) => props.$color || props.theme.textSecondary};
   stroke-dasharray: 46;
   stroke-dashoffset: 0;
   transform-origin: center;

app/components/Toast.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import styled, { css } from "styled-components";
 import { fadeAndScaleIn, pulse } from "~/styles/animations";
 import { Toast as TToast } from "~/types";
+import Spinner from "./Spinner";
 
 type Props = {
   onRequestClose: () => void;
@@ -56,6 +57,7 @@ function Toast({ closeAfterMs = 3000, onRequestClose, toast }: Props) {
       onMouseLeave={handleResume}
     >
       <Container onClick={action ? undefined : onRequestClose}>
+        {type === "loading" && <Spinner color="currentColor" />}
         {type === "info" && <InfoIcon color="currentColor" />}
         {type === "success" && <CheckboxIcon checked color="currentColor" />}
         {type === "warning" ||