UI improvements

src/lib/components/ButtonWithLoader/ButtonWithLoader.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { Button } from "$lib/components/ui/button";
+    import { Loader } from "lucide-svelte";
+    import { fly } from "svelte/transition";
+    import { twMerge } from "tailwind-merge";
+
+    export let disabled: boolean = false;
+    export let loader = false;
+</script>
+
+<Button
+    class={twMerge(
+        "disabled:cursor-not-allowed disabled:opacity-100 disabled:text-muted-foreground disabled:bg-secondary",
+        $$props.class,
+    )}
+    {disabled}
+    on:click
+>
+    {#if loader}
+        <div
+            in:fly={{ delay: 300, duration: 300, x: -50, opacity: 0 }}
+            out:fly={{ duration: 200, x: -50, opacity: 0 }}
+        >
+            <Loader
+                class={twMerge("h-7 w-7 animate-spin", $$props.loaderClass)}
+            />
+        </div>
+    {:else}
+        <div
+            in:fly={{ delay: 200, duration: 300, x: 50, opacity: 0 }}
+            out:fly={{ duration: 200, x: 50, opacity: 0 }}
+        >
+            <slot />
+        </div>
+    {/if}
+</Button>

src/lib/components/Messages/MessagesPage.svelte

@@ -0,0 +1 @@
+<div></div>

src/lib/components/UserList/UserList.svelte

@@ -8,29 +8,45 @@
     import { currentUser } from "$lib/stores/profile.store";
 
     let userelays: Array<UserInfo> = [];
-    let title = "You might like"
+    let title = "You might like";
 
-    users.subscribe((value) => (userelays = value.filter(relay => relay.Process != $currentUser.Process)));
+    users.subscribe(
+        (value) =>
+            (userelays = value.filter(
+                (relay) => relay.Process != $currentUser.Process,
+            )),
+    );
 
     onMount(async () => {
         console.log("********Mounted*******");
         await relays("1", "100");
     });
 </script>
 
-<div>
+<div class="w-full h-full">
     <Card.Root
         data-x-chunk-name="UserList"
         data-x-chunk-description="A card showing a list of users."
-        class="border-border rounded"
+        class="border-border rounded p-0 max-w-[380px] min-w-[280px]"
     >
         <Card.Header>
             <Card.Title>{title}</Card.Title>
         </Card.Header>
-        <Card.Content class="grid gap-8">
-            {#each userelays as userelay}
-                <ProfileCard data={userelay} />
-            {/each}
+        <Card.Content class="w-full">
+            <div
+                class="grid gap-8 max-h-[80vh] overflow-y-auto scrollable-element pr-3 w-full max-w-full"
+            >
+                {#each userelays as userelay}
+                    <ProfileCard data={userelay} />
+                {/each}
+            </div>
         </Card.Content>
     </Card.Root>
-</div>
+</div>
+
+<style>
+    .scrollable-element {
+        scrollbar-color: hsl(0, 0%, 45%) hsl(0 0% 14.9%);
+        scrollbar-width: thin;
+    }
+</style>