Improve placeholders

laravel · Sep 2, 2023 · 018e78b · 018e78b
1 parent b07752e
commit 018e78b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/dist/pulse.css b/dist/pulse.css
diff --git a/resources/views/components/placeholder.blade.php b/resources/views/components/placeholder.blade.php
@@ -1,10 +1,12 @@
 <x-pulse::card class="animate-pulse col-span-{{ $cols }}">
     <x-slot:title>
-        <div class="rounded bg-gray-100 h-6 w-1/2"></div>
+        <div class="h-[30px] flex items-center w-full">
+            <div class="rounded bg-gray-50 h-6 w-1/2"></div>
+        </div>
     </x-slot:title>
-    <div class="space-y-4">
-        <div class="rounded bg-gray-100 h-4 w-1/3"></div>
-        <div class="rounded bg-gray-100 h-4 w-2/3"></div>
-        <div class="rounded bg-gray-100 h-4 w-3/5"></div>
+    <div class="space-y-4 h-56">
+        <div class="rounded bg-gray-50 h-12"></div>
+        <div class="rounded bg-gray-50 h-12"></div>
+        <div class="rounded bg-gray-50 h-12"></div>
     </div>
 </x-pulse::card>
diff --git a/resources/views/components/servers-placeholder.blade.php b/resources/views/components/servers-placeholder.blade.php
@@ -0,0 +1,6 @@
+<div class="h-[52px] flex items-center justify-between animate-pulse col-span-{{ $cols }}">
+    <div class="mt-4 h-8 w-1/12 bg-gray-100 rounded"></div>
+    <div class="mt-4 h-8 w-3/12 bg-gray-100 rounded"></div>
+    <div class="mt-4 h-8 w-3/12 bg-gray-100 rounded"></div>
+    <div class="mt-4 h-8 w-2/12 bg-gray-100 rounded"></div>
+</div>
diff --git a/src/Livewire/Servers.php b/src/Livewire/Servers.php
@@ -40,6 +40,6 @@ public function render(callable $query): Renderable
      */
     public function placeholder(): Renderable
     {
-        return View::make('pulse::components.placeholder', ['cols' => $this->cols]);
+        return View::make('pulse::components.servers-placeholder', ['cols' => $this->cols]);
     }
 }