From 4d699f184131628078a2e2172f546e471e7d1b35 Mon Sep 17 00:00:00 2001
From: Jeff MAURY <jmaury@redhat.com>
Date: Wed, 12 Jun 2024 10:31:55 +0200
Subject: [PATCH] chore: adopt Spinner from svelte ui library (#1197)

* chore: adopt Spinner from svelte ui library

Fixes #963

Signed-off-by: Jeff MAURY <jmaury@redhat.com>
---
 .../frontend/src/lib/RecipeDetails.svelte     |  3 +-
 packages/frontend/src/lib/StatusIcon.svelte   |  2 +-
 .../frontend/src/lib/button/Spinner.svelte    | 53 -------------------
 .../lib/table/application/ColumnStatus.svelte |  2 +-
 .../lib/table/service/ServiceStatus.svelte    |  2 +-
 5 files changed, 4 insertions(+), 58 deletions(-)
 delete mode 100644 packages/frontend/src/lib/button/Spinner.svelte

diff --git a/packages/frontend/src/lib/RecipeDetails.svelte b/packages/frontend/src/lib/RecipeDetails.svelte
index 2f3ece254..af5e2004d 100644
--- a/packages/frontend/src/lib/RecipeDetails.svelte
+++ b/packages/frontend/src/lib/RecipeDetails.svelte
@@ -19,8 +19,7 @@ import PodIcon from '/@/lib/images/PodIcon.svelte';
 import StatusIcon from '/@/lib/StatusIcon.svelte';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { getApplicationStatus, getApplicationStatusText } from '../pages/applications';
-import Spinner from './button/Spinner.svelte';
-import { Button } from '@podman-desktop/ui-svelte';
+import { Button, Spinner } from '@podman-desktop/ui-svelte';
 
 export let recipeId: string;
 export let modelId: string;
diff --git a/packages/frontend/src/lib/StatusIcon.svelte b/packages/frontend/src/lib/StatusIcon.svelte
index 10091300d..8c04410c3 100644
--- a/packages/frontend/src/lib/StatusIcon.svelte
+++ b/packages/frontend/src/lib/StatusIcon.svelte
@@ -2,7 +2,7 @@
 import type { KnownStatus } from './StatusIcon';
 // status: one of RUNNING, STARTING, USED, CREATED, DELETING, or DEGRADED
 // any other status will result in a standard outlined box
-import Spinner from '/@/lib/button/Spinner.svelte';
+import { Spinner } from '@podman-desktop/ui-svelte';
 
 export let status: KnownStatus | string = '';
 export let icon: any = undefined;
diff --git a/packages/frontend/src/lib/button/Spinner.svelte b/packages/frontend/src/lib/button/Spinner.svelte
deleted file mode 100644
index 1bc8cc5f2..000000000
--- a/packages/frontend/src/lib/button/Spinner.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-export let size = '2em';
-</script>
-
-<i class="flex justify-center items-center">
-  <svg width="{size}" height="{size}" viewBox="0 0 100 100" role="img">
-    <defs>
-      <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
-        <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1"></stop>
-        <stop offset="60%" style="stop-color:rgb(0,0,0);stop-opacity:1"></stop>
-        <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop>
-      </linearGradient>
-    </defs>
-    <mask id="myMask">
-      <rect x="0" y="0" width="100" height="100" fill="white"></rect>
-      <rect x="-25" y="-25" width="150" height="75" fill="black"></rect>
-      <g transform="translate(50,50)" style="width={size}; height={size}">
-        <g>
-          <rect x="-75" y="-75" width="150" height="75" fill="url(#grad1)"></rect>
-          <rect x="-75" y="-70" width="100" height="75" fill="black"></rect>
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            dur="1.5s"
-            from="0"
-            to="180"
-            values="0; 140;180; 140; 0"
-            keyTimes="0; 0.25;0.5; 0.75;1"
-            repeatCount="indefinite"></animateTransform>
-        </g>
-      </g>
-    </mask>
-    <circle
-      cx="50"
-      cy="50"
-      r="46"
-      stroke="currentColor"
-      opacity="0.8"
-      stroke-width="10"
-      fill="transparent"
-      mask="url(#myMask)"></circle>
-    <animateTransform
-      attributeName="transform"
-      type="rotate"
-      dur="3s"
-      from="0"
-      to="360"
-      repeatCount="indefinite"
-      values="0;90;180;270;360;450;540;630;720;810;900;990;1080;1170;1260;1350;1440;1530;1620;1710;1800"
-      keyTimes="0; 0.02;0.08;0.18;0.32;0.375;0.42;0.455;0.48;0.495;0.5;0.52;0.58;0.68;0.82;0.875;0.92;0.955;0.98;0.995;1"
-    ></animateTransform>
-  </svg>
-</i>
diff --git a/packages/frontend/src/lib/table/application/ColumnStatus.svelte b/packages/frontend/src/lib/table/application/ColumnStatus.svelte
index 521df419e..773ec439c 100644
--- a/packages/frontend/src/lib/table/application/ColumnStatus.svelte
+++ b/packages/frontend/src/lib/table/application/ColumnStatus.svelte
@@ -3,7 +3,7 @@ import { getApplicationStatus } from '../../../pages/applications';
 import type { ApplicationState } from '@shared/src/models/IApplicationState';
 import StatusIcon from '../../StatusIcon.svelte';
 import PodIcon from '../../images/PodIcon.svelte';
-import Spinner from '../../button/Spinner.svelte';
+import { Spinner } from '@podman-desktop/ui-svelte';
 export let object: ApplicationState;
 
 $: status = getApplicationStatus(object);
diff --git a/packages/frontend/src/lib/table/service/ServiceStatus.svelte b/packages/frontend/src/lib/table/service/ServiceStatus.svelte
index 65e80db9a..fb62c8bb1 100644
--- a/packages/frontend/src/lib/table/service/ServiceStatus.svelte
+++ b/packages/frontend/src/lib/table/service/ServiceStatus.svelte
@@ -2,7 +2,7 @@
 import type { InferenceServer } from '@shared/src/models/IInference';
 import StatusIcon from '/@/lib/StatusIcon.svelte';
 import { studioClient } from '/@/utils/client';
-import Spinner from '/@/lib/button/Spinner.svelte';
+import { Spinner } from '@podman-desktop/ui-svelte';
 import { ContainerIcon } from '@podman-desktop/ui-svelte/icons';
 export let object: InferenceServer;