danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use lucide loader icon for discovery spinners

Browse source
This commit is contained in:
rcourtman 2025-10-22 12:30:04 +00:00
parent bc479643e4
commit 971d55f334
2 changed files with 13 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontend-modern/src/components/Settings/DiscoveryModal.tsx
View file

@ -2,6 +2,7 @@ import { Component, Show, createSignal, For, createEffect, on } from 'solid-js';
import { Portal } from 'solid-js/web';
import { showSuccess, showError } from '@/utils/toast';
import { SectionHeader } from '@/components/shared/SectionHeader';
import Loader from 'lucide-solid/icons/loader';
interface DiscoveredServer {
ip: string;
@ -370,21 +371,7 @@ export const DiscoveryModal: Component<DiscoveryModalProps> = (props) => {
</svg>
}
>
<svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
<Loader class="animate-spin h-4 w-4" />
</Show>
</button>
</div>
@ -393,25 +380,7 @@ export const DiscoveryModal: Component<DiscoveryModalProps> = (props) => {
{/* Show loading message when scanning with no results yet */}
<Show when={isScanning() && !discoveryResult()}>
<div class="text-center py-8 text-gray-500 dark:text-gray-400">
<svg
class="animate-spin h-12 w-12 mx-auto mb-4 text-blue-500"
viewBox="0 0 24 24"
fill="none"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
<Loader class="animate-spin h-12 w-12 mx-auto mb-4 text-blue-500" />
<p>Scanning network...</p>
<p class="text-xs mt-2">Servers will appear here as they're discovered</p>
</div>

64
frontend-modern/src/components/Settings/Settings.tsx
View file

@ -28,6 +28,7 @@ import Container from 'lucide-solid/icons/container';
import SettingsIcon from 'lucide-solid/icons/settings';
import Shield from 'lucide-solid/icons/shield';
import Activity from 'lucide-solid/icons/activity';
import Loader from 'lucide-solid/icons/loader';
import type { NodeConfig } from '@/types/nodes';
import type { UpdateInfo, VersionInfo } from '@/api/updates';
import type { APITokenRecord } from '@/api/security';
@ -1779,7 +1780,7 @@ const Settings: Component<SettingsProps> = (props) => {
</svg>
<span class="text-sm font-medium">You have unsaved changes</span>
</div>
<div class="flex gap-2 w-full sm:w-auto">
<div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
<button
type="button"
class="flex-1 sm:flex-initial px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
@ -1888,7 +1889,7 @@ const Settings: Component<SettingsProps> = (props) => {
<Show when={initialLoadComplete()}>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-3">
<SectionHeader title="Proxmox VE nodes" size="md" class="flex-1" />
<div class="flex flex-wrap gap-2 items-center justify-end">
<div class="flex flex-wrap items-center justify-start gap-2 sm:justify-end">
{/* Discovery toggle */}
<div
class="flex items-center gap-2 sm:gap-3"
@ -2264,16 +2265,7 @@ const Settings: Component<SettingsProps> = (props) => {
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
<Show when={discoveryScanStatus().scanning}>
<span class="flex items-center gap-2">
<svg
class="h-4 w-4 animate-spin"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle>
<path d="M22 12a10 10 0 00-10-10" stroke-linecap="round"></path>
</svg>
<Loader class="h-4 w-4 animate-spin" />
<span>Scanning your network for Proxmox VE servers…</span>
</span>
</Show>
@ -2327,16 +2319,7 @@ const Settings: Component<SettingsProps> = (props) => {
}
>
<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
<svg
class="h-4 w-4 animate-spin"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle>
<path d="M22 12a10 10 0 00-10-10" stroke-linecap="round"></path>
</svg>
<Loader class="h-4 w-4 animate-spin" />
<span>
Waiting for responses… this can take up to a minute depending on your
network size.
@ -2427,7 +2410,7 @@ const Settings: Component<SettingsProps> = (props) => {
<Show when={initialLoadComplete()}>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-3">
<SectionHeader title="Proxmox Backup Server nodes" size="md" class="flex-1" />
<div class="flex flex-wrap gap-2 items-center justify-end">
<div class="flex flex-wrap items-center justify-start gap-2 sm:justify-end">
{/* Discovery toggle */}
<div
class="flex items-center gap-2 sm:gap-3"
@ -2692,16 +2675,7 @@ const Settings: Component<SettingsProps> = (props) => {
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
<Show when={discoveryScanStatus().scanning}>
<span class="flex items-center gap-2">
<svg
class="h-4 w-4 animate-spin"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle>
<path d="M22 12a10 10 0 00-10-10" stroke-linecap="round"></path>
</svg>
<Loader class="h-4 w-4 animate-spin" />
<span>Scanning your network for Proxmox Backup Servers…</span>
</span>
</Show>
@ -2755,16 +2729,7 @@ const Settings: Component<SettingsProps> = (props) => {
}
>
<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
<svg
class="h-4 w-4 animate-spin"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle>
<path d="M22 12a10 10 0 00-10-10" stroke-linecap="round"></path>
</svg>
<Loader class="h-4 w-4 animate-spin" />
<span>
Waiting for responses… this can take up to a minute depending on your
network size.
@ -2856,7 +2821,7 @@ const Settings: Component<SettingsProps> = (props) => {
<Show when={initialLoadComplete()}>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-3">
<SectionHeader title="Proxmox Mail Gateway nodes" size="md" class="flex-1" />
<div class="flex flex-wrap gap-2 items-center justify-end">
<div class="flex flex-wrap items-center justify-start gap-2 sm:justify-end">
{/* Discovery toggle */}
<div
class="flex items-center gap-2 sm:gap-3"
@ -3101,16 +3066,7 @@ const Settings: Component<SettingsProps> = (props) => {
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
<Show when={discoveryScanStatus().scanning}>
<span class="flex items-center gap-2">
<svg
class="h-4 w-4 animate-spin"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<path d="M12 3v6m0 6v6m6-9h-6m-6 0H3" />
</svg>
<Loader class="h-4 w-4 animate-spin" />
Scanning network...
</span>
</Show>