Replace loading SVG icon in the Loader component

Co-authored-by: Deepayan Mukherjee <[email protected]>
gitpod-io · Feb 15, 2023 · 5ee1a2f · 5ee1a2f
1 parent eb6ca45
commit 5ee1a2f
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 73 deletions.
diff --git a/components/dashboard/src/admin/BlockedRepositories.tsx b/components/dashboard/src/admin/BlockedRepositories.tsx
@@ -15,6 +15,7 @@ import CheckBox from "../components/CheckBox";
 import { ItemFieldContextMenu } from "../components/ItemsList";
 import { ContextMenuEntry } from "../components/ContextMenu";
 import Alert from "../components/Alert";
+import { SpinnerLoader } from "../components/Loader";
 
 export function BlockedRepositories() {
     return (
@@ -120,20 +121,7 @@ export function BlockedRepositoriesList(props: Props) {
                         <div className="flex">
                             <div className="py-4">
                                 {searching ? (
-                                    <svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            fill="#A8A29E"
-                                            d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-                                        >
-                                            <animateTransform
-                                                attributeName="transform"
-                                                type="rotate"
-                                                dur="0.75s"
-                                                values="0 12 12;360 12 12"
-                                                repeatCount="indefinite"
-                                            />
-                                        </path>
-                                    </svg>
+                                    <SpinnerLoader small={true} />
                                 ) : (
                                     <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                         <path

diff --git a/components/dashboard/src/admin/ProjectsSearch.tsx b/components/dashboard/src/admin/ProjectsSearch.tsx
@@ -14,6 +14,7 @@ import { getGitpodService } from "../service/service";
 import { AdminGetListResult, Project } from "@gitpod/gitpod-protocol";
 import { AdminPageHeader } from "./AdminPageHeader";
 import Pagination from "../Pagination/Pagination";
+import { SpinnerLoader } from "../components/Loader";
 
 export default function ProjectsSearchPage() {
     return (
@@ -98,20 +99,7 @@ export function ProjectsSearch() {
                         <div className="flex">
                             <div className="py-4">
                                 {searching ? (
-                                    <svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            fill="#A8A29E"
-                                            d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-                                        >
-                                            <animateTransform
-                                                attributeName="transform"
-                                                type="rotate"
-                                                dur="0.75s"
-                                                values="0 12 12;360 12 12"
-                                                repeatCount="indefinite"
-                                            />
-                                        </path>
-                                    </svg>
+                                    <SpinnerLoader small={true} />
                                 ) : (
                                     <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                         <path

diff --git a/components/dashboard/src/admin/TeamsSearch.tsx b/components/dashboard/src/admin/TeamsSearch.tsx
@@ -15,6 +15,7 @@ import { AdminGetListResult, Team } from "@gitpod/gitpod-protocol";
 import Label from "./Label";
 import { AdminPageHeader } from "./AdminPageHeader";
 import Pagination from "../Pagination/Pagination";
+import { SpinnerLoader } from "../components/Loader";
 
 export default function TeamsSearchPage() {
     return (
@@ -79,20 +80,7 @@ export function TeamsSearch() {
                     <div className="flex">
                         <div className="py-4">
                             {searching ? (
-                                <svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        fill="#A8A29E"
-                                        d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-                                    >
-                                        <animateTransform
-                                            attributeName="transform"
-                                            type="rotate"
-                                            dur="0.75s"
-                                            values="0 12 12;360 12 12"
-                                            repeatCount="indefinite"
-                                        />
-                                    </path>
-                                </svg>
+                                <SpinnerLoader small={true} />
                             ) : (
                                 <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path

diff --git a/components/dashboard/src/admin/UserSearch.tsx b/components/dashboard/src/admin/UserSearch.tsx
@@ -9,6 +9,7 @@ import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import { Link } from "react-router-dom";
+import { SpinnerLoader } from "../components/Loader";
 import Pagination from "../Pagination/Pagination";
 import { getGitpodService } from "../service/service";
 import { AdminPageHeader } from "./AdminPageHeader";
@@ -68,20 +69,7 @@ export default function UserSearch() {
                         <div className="flex">
                             <div className="py-4">
                                 {searching ? (
-                                    <svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            fill="#A8A29E"
-                                            d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-                                        >
-                                            <animateTransform
-                                                attributeName="transform"
-                                                type="rotate"
-                                                dur="0.75s"
-                                                values="0 12 12;360 12 12"
-                                                repeatCount="indefinite"
-                                            />
-                                        </path>
-                                    </svg>
+                                    <SpinnerLoader small={true} />
                                 ) : (
                                     <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                         <path

diff --git a/components/dashboard/src/admin/WorkspacesSearch.tsx b/components/dashboard/src/admin/WorkspacesSearch.tsx
@@ -26,6 +26,7 @@ import WorkspaceDetail from "./WorkspaceDetail";
 import { AdminPageHeader } from "./AdminPageHeader";
 import Alert from "../components/Alert";
 import { isGitpodIo } from "../utils";
+import { SpinnerLoader } from "../components/Loader";
 import { WorkspaceStatusIndicator } from "../workspaces/WorkspaceStatusIndicator";
 
 interface Props {
@@ -117,20 +118,7 @@ export function WorkspaceSearch(props: Props) {
                         <div className="flex">
                             <div className="py-4">
                                 {searching ? (
-                                    <svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            fill="#A8A29E"
-                                            d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-                                        >
-                                            <animateTransform
-                                                attributeName="transform"
-                                                type="rotate"
-                                                dur="0.75s"
-                                                values="0 12 12;360 12 12"
-                                                repeatCount="indefinite"
-                                            />
-                                        </path>
-                                    </svg>
+                                    <SpinnerLoader small={true} />
                                 ) : (
                                     <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                         <path

diff --git a/components/dashboard/src/components/Loader.tsx b/components/dashboard/src/components/Loader.tsx
@@ -6,9 +6,13 @@
 
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
 
-export function SpinnerLoader(props: { content?: string }) {
+export function SpinnerLoader(props: { content?: string; small?: boolean }) {
     return (
-        <div className="flex items-center justify-center space-x-2 text-gray-400 text-sm pt-16 pb-40">
+        <div
+            className={`flex items-center justify-center space-x-2 text-gray-400 text-sm ${
+                props.small ? "" : "pt-16 pb-40"
+            }`}
+        >
             <Spinner className="h-4 w-4 animate-spin" />
             {props.content && <span>{props.content}</span>}
         </div>

diff --git a/components/dashboard/src/icons/Spinner.svg b/components/dashboard/src/icons/Spinner.svg