From 8af9ad59b3969ebda19eae146b9904e44f2ced7f Mon Sep 17 00:00:00 2001
From: c00b3r <sanuyOKmaklaren0@gmail.com>
Date: Thu, 5 Jun 2025 17:40:33 +0500
Subject: [PATCH] feat: update DesktopCard for loading state

---
 src/components/DesktopCard.tsx     | 10 ++++++--
 src/components/ProjectSelector.tsx |  4 +--
 src/components/icons/SpinIcon.tsx  | 40 ++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 src/components/icons/SpinIcon.tsx

diff --git a/src/components/DesktopCard.tsx b/src/components/DesktopCard.tsx
index bcad047..8ff993b 100644
--- a/src/components/DesktopCard.tsx
+++ b/src/components/DesktopCard.tsx
@@ -10,6 +10,7 @@ import UnlinkIcon from "./icons/UnlinkIcon";
 import clsx from "clsx";
 import ChevronRightIcon from "./icons/ChevronRightIcon";
 import CurrentSessionModal from "./modals/CurrentSessionModal";
+import SpinIcon from "./icons/SpinIcon";
 
 interface IDesktopCardProps {
   server: IServer;
@@ -52,8 +53,13 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
       </div>
       <div className="flex gap-[0.278vw] justify-center -mt-[0.278vw]">
         {server.sessions?.[0]?.status === "starting" ? (
-          <div className="p-4 bg-white rounded-lg text-2xl outline">
-            загрузка...
+          <div className="flex items-center gap-[0.278vw] bg-[#F8F7FE] p-[0.833vw] rounded-xl">
+            <span className="size-[1.111vw] animate-spin text-[#7B60F3]">
+              <SpinIcon />
+            </span>
+            <div className="button-s font-medium text-[#7B60F3]">
+              Начинаем сеанс
+            </div>
           </div>
         ) : server.sessions?.[0]?.status === "started" ? (
           <div className="flex items-center gap-[0.278vw]">
diff --git a/src/components/ProjectSelector.tsx b/src/components/ProjectSelector.tsx
index 6488801..a497716 100644
--- a/src/components/ProjectSelector.tsx
+++ b/src/components/ProjectSelector.tsx
@@ -39,7 +39,7 @@ function ProjectSelector({
       >
         <div className="space-y-[0.278vw]">
           <p className="caption-s text-[#7D7D7D] w-fit font-medium">Проект</p>
-          <p className="text-s w-fit">{selectedProject?.name}</p>
+          <p className="text-s font-medium w-fit">{selectedProject?.name}</p>
         </div>
         <div className="flex items-center gap-[0.556vw]">
           <img src="/images/app_image.png" className="size-[2.222vw]" alt="" />
@@ -89,7 +89,7 @@ function ProjectSelector({
                     />
                     <div className="space-y-[0.278vw]">
                       <div className="flex items-center gap-[0.278vw]">
-                        <p className="text-s">{project.name}</p>
+                        <p className="text-s font-medium">{project.name}</p>
                         {activeProject &&
                           project.name === activeProject.name && (
                             <span className="size-[0.972vw] text-[#7B60F3]">
diff --git a/src/components/icons/SpinIcon.tsx b/src/components/icons/SpinIcon.tsx
new file mode 100644
index 0000000..f64e60b
--- /dev/null
+++ b/src/components/icons/SpinIcon.tsx
@@ -0,0 +1,40 @@
+function SpinIcon() {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#a)" data-figma-skip-parse="true">
+        <foreignObject
+          x={-1750}
+          y={-1750}
+          width={3500}
+          height={3500}
+          transform="rotate(45.003 -7.07 17.072)scale(.0066)"
+        >
+          <div
+            style={{
+              background:
+                "conic-gradient(from 90deg,rgba(255,255,255,.0195) 0deg,#fff 314.826deg,rgba(255,255,255,0) 353.741deg,rgba(255,255,255,.0195) 360deg)",
+              height: "100%",
+              width: "100%",
+              opacity: 1,
+            }}
+          />
+        </foreignObject>
+      </g>
+      <path
+        d="M15.833 10c.46 0 .839-.374.781-.831a6.667 6.667 0 1 0-1.9 5.544c.326-.325.257-.853-.107-1.135-.363-.283-.883-.21-1.222.101a5 5 0 1 1 1.545-4.508c.077.453.443.83.903.83"
+        data-figma-gradient-fill='{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"position":0.87451690435409546},{"color":{"r":1.0,"g":1.0,"b":1.0,"a":0.0},"position":0.98261332511901855}],"stopsVar":[],"transform":{"m00":9.3333330154418945,"m01":-9.3333330154418945,"m02":9.9996738433837891,"m10":9.3333330154418945,"m11":9.3333330154418945,"m12":0.66682958602905273},"opacity":1.0,"blendMode":"NORMAL","visible":true}'
+      />
+      <defs>
+        <clipPath id="a">
+          <path d="M15.833 10c.46 0 .839-.374.781-.831a6.667 6.667 0 1 0-1.9 5.544c.326-.325.257-.853-.107-1.135-.363-.283-.883-.21-1.222.101a5 5 0 1 1 1.545-4.508c.077.453.443.83.903.83" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default SpinIcon;