ui polish

src/components/services/widget/block.jsx

@@ -1,6 +1,13 @@
+import classNames from "classnames";
+
 export default function Block({ value, label }) {
   return (
-    <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
+    <div
+      className={classNames(
+        "bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1",
+        value === undefined ? "animate-pulse" : ""
+      )}
+    >
       <div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
       <div className="font-bold text-xs uppercase">{label}</div>
     </div>

src/components/widgets/resources/cpu.jsx

@@ -25,10 +25,20 @@ export default function Cpu({ expanded }) {
 
   if (!data) {
     return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
         <FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("docker.cpu")}</div>
+          </div>
+          {expanded && (
+            <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.load")}</div>
+            </div>
+          )}
+          <UsageBar percent={100} />
         </div>
       </div>
     );

src/components/widgets/resources/disk.jsx

@@ -25,10 +25,20 @@ export default function Disk({ options, expanded }) {
 
   if (!data) {
     return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
         <FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.free")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.total")}</div>
+            </span>
+          )}
+          <UsageBar percent={100} />
         </div>
       </div>
     );

src/components/widgets/resources/memory.jsx

@@ -25,10 +25,20 @@ export default function Memory({ expanded }) {
 
   if (!data) {
     return (
-      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
         <FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
-        <div className="flex flex-col ml-3 text-left">
-          <span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.free")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.total")}</div>
+            </span>
+          )}
+          <UsageBar percent={100} />
         </div>
       </div>
     );

src/components/widgets/resources/usage-bar.jsx

@@ -2,7 +2,7 @@ export default function UsageBar({ percent }) {
   return (
     <div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-theme-200/20">
       <div
-        className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50"
+        className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50 transition-all duration-1000"
         style={{
           width: `${percent}%`,
         }}