rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add loading overlay to runtime logs to prevent flicker during refresh

Browse source 
Shows a subtle loading indicator over the logs container during refresh
or when enabling streaming. This masks any brief visual glitches from
Livewire's DOM morphing when log content changes significantly.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-12-18 12:44:39 +01:00
parent 334fd2500f
commit deb79cf050
1 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/views/livewire/project/shared/get-logs.blade.php
View file

@ -391,7 +391,7 @@ class="flex overflow-y-auto overflow-x-hidden flex-col px-4 py-2 w-full min-w-0
class="text-gray-500 dark:text-gray-400 py-2">
No matches found.
</div>
@foreach ($displayLines as $line)
@foreach ($displayLines as $index => $line)
@php
// Parse timestamp from log line (ISO 8601 format: 2025-12-04T11:48:39.136764033Z)
$timestamp = '';
@ -411,8 +411,10 @@ class="text-gray-500 dark:text-gray-400 py-2">
// Format: 2025-Dec-04 09:44:58.198879
$timestamp = "{$year}-{$monthName}-{$day} {$time}.{$microseconds}";
}
// Use timestamp for stable key (unique per log line)
$lineKey = $timestamp ?: 'line-' . $index;
@endphp
<div data-log-line data-log-content="{{ $line }}" class="flex gap-2 log-line">
<div wire:key="{{ $lineKey }}" data-log-line data-log-content="{{ $line }}" class="flex gap-2 log-line">
@if ($timestamp && $showTimeStamps)
<span class="shrink-0 text-gray-500">{{ $timestamp }}</span>
@endif