Adding loading.tsx

app/(customer)/dashboard/loading.tsx

@@ -0,0 +1,9 @@
+import {LoadingSpinner} from "@/components/wrappers/Loading/LoadingSpinner";
+
+export default function Loading() {
+    return (
+        <div className="w-full h-full flex flex-col items-center justify-center">
+            <LoadingSpinner size={50} />
+        </div>
+    )
+}

app/(customer)/dashboard/projects/[projectId]/database/[databaseId]/page.tsx

@@ -1,13 +1,10 @@
 import {PageParams} from "@/types/next";
 import {prisma} from "@/prisma";
-import {notFound, usePathname, useRouter} from "next/navigation";
+import {notFound} from "next/navigation";
 import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
 import {BackupButton} from "@/components/wrappers/dashboard/backup/backup-button/backup-button";
 import {DatabaseTabs} from "@/components/wrappers/dashboard/Projects/Database/DatabaseTabs";
 import {DatabaseKpi} from "@/components/wrappers/dashboard/Projects/Database/DatabaseKpi";
-import Link from "next/link";
-import {buttonVariants} from "@/components/ui/button";
-import {GearIcon} from "@radix-ui/react-icons";
 import {EditButton} from "@/components/wrappers/dashboard/database/EditButton/EditButton";
 import {CronButton} from "@/components/wrappers/dashboard/database/CronButton/CronButton";
 
@@ -31,12 +28,18 @@ export default async function RoutePage(props: PageParams<{ databaseId: string }
         },
         include:{
             restorations: {}
+        },
+        orderBy: {
+            createdAt: "desc"
         }
     })
 
     const restorations = await prisma.restoration.findMany({
         where: {
             databaseId: databaseId,
+        },
+        orderBy: {
+            createdAt: "desc"
         }
     })
 

src/components/wrappers/Loading/LoadingSpinner.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {cn} from "@/lib/utils";
+
+export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+    className?: string;
+}
+
+export const LoadingSpinner = ({
+                                   size = 24,
+                                   className,
+                                   ...props
+                               }: ISVGProps) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={size}
+            height={size}
+            {...props}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={cn("animate-spin", className)}
+        >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+        </svg>
+    );
+};

src/components/wrappers/dashboard/Projects/Database/DatabaseKpi.tsx

@@ -25,7 +25,7 @@ export const DatabaseKpi = (props: DatabaseKpiPro) => {
                     Success rate
                 </CardHeader>
                 <CardContent>
-                    {props.successRate ?? "Unavailable for now."}
+                    {props.successRate ? `${props.successRate} %` : "Unavailable for now."}
                 </CardContent>
             </Card>
             <Card className="w-full sm:w-auto flex-1">