Refactoring on image and component loading.

src/components/wrappers/auth/auth-logo-section.tsx

@@ -8,6 +8,7 @@ import {useEffect, useState} from "react";
 export const AuthLogoSection = () => {
     const {resolvedTheme} = useTheme();
     const [mounted, setMounted] = useState(false);
+    const [loaded, setLoaded] = useState(false);
 
     useEffect(() => {
         setMounted(true);
@@ -18,6 +19,14 @@ export const AuthLogoSection = () => {
             ? "/images/logo-white.png"
             : "/images/logo-black.png";
 
+    const handleLoad = () => setLoaded(true);
+
+    const style = {
+        transition: "opacity 0.3s ease-in-out",
+        opacity: loaded ? 1 : 0,
+    };
+
+
     return (
         <div className="sm:mx-auto sm:w-full sm:max-w-md relative flex items-center justify-center h-[160px]">
             {mounted && (
@@ -27,9 +36,12 @@ export const AuthLogoSection = () => {
                     fill
                     priority
                     className="object-contain p-10"
+                    onLoad={handleLoad}
+                    style={style}
+
                 />
             )}
-            <span className="absolute bottom-12 right-2 text-sm text-muted-foreground">
+            <span className="absolute bottom-12 right-2 text-sm text-muted-foreground" style={style}>
                 v{env.NEXT_PUBLIC_PROJECT_VERSION}
             </span>
         </div>

src/components/wrappers/common/combobox.tsx

@@ -60,6 +60,7 @@ export function ComboBox<T = string>(props: ComboBoxProps<T>) {
                     align="start"
                     sideOffset={4}
                     style={{ width: 'var(--radix-popover-trigger-width)' }}
+
                 >
                     <Command>
                         {searchField && <CommandInput placeholder="Search choice..." className="h-9"/>}

src/components/wrappers/dashboard/common/sidebar/logo-sidebar.tsx

@@ -1,48 +1,64 @@
-"use client"
+"use client";
 
 import { useSidebar } from "@/components/ui/sidebar";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import { useEffect, useState } from "react";
+import {Skeleton} from "@/components/ui/skeleton";
 
-export const SidebarLogo = ({projectName}: {
-    projectName: string;
-}) => {
+export const SidebarLogo = ({ projectName }: { projectName: string }) => {
     const { state, isMobile } = useSidebar();
     const { resolvedTheme } = useTheme();
 
     const [mounted, setMounted] = useState(false);
+    const [loaded, setLoaded] = useState(false);
 
     useEffect(() => {
         setMounted(true);
     }, []);
 
-    if (!mounted) return null;
+    if (!mounted) return(
+        <div className="m-4 w-[190px] h-[45px]">
+            <Skeleton className="w-full h-full bg-transparent" />
+        </div>
+    );
 
-    const imageTheme = resolvedTheme === "dark" ? "/images/logo-white.png" : "/images/logo-black.png";
+    const imageTheme =
+        resolvedTheme === "dark" ? "/images/logo-white.png" : "/images/logo-black.png";
+
+    const handleLoad = () => setLoaded(true);
+
+    const style = {
+        transition: "opacity 0.3s ease-in-out",
+        opacity: loaded ? 1 : 0,
+    };
 
     return (
         <div className="ml-1 flex items-center justify-center">
-            <Link href={"/dashboard/home"}>
-                {state === 'collapsed' && !isMobile ? (
+            <Link href="/dashboard/home">
+                {state === "collapsed" && !isMobile ? (
                     <Image
-                        loading="eager"
-                        src={"/images/logo.png"}
+                        src="/images/logo.png"
                         alt={`Logo ${projectName}`}
-                        className="h-10 w-10 object-contain"
-                        height={10}
-                        width={10}
+                        width={40}
+                        height={40}
+                        loading="eager"
+                        priority
+                        style={style}
+                        onLoad={handleLoad}
                     />
                 ) : (
-                    <div className="m-4">
+                    <div className="m-4 w-[190px] h-[45px] ">
                         <Image
-                            loading="eager"
                             src={imageTheme}
                             alt={`Logo ${projectName}`}
-                            className="object-contain"
                             width={190}
                             height={90}
+                            loading="eager"
+                            priority
+                            style={style}
+                            onLoad={handleLoad}
                         />
                     </div>
                 )}

src/components/wrappers/dashboard/organization/organization-combobox.tsx

@@ -13,9 +13,12 @@ export function OrganizationCombobox() {
     const {data: activeOrganization, refetch: refetchActiveOrga} = authClient.useActiveOrganization();
     const [openModal, setOpenModal] = useState(false);
 
-    if (!organizations) return null;
+    // if (!organizations) return null;
+
+    // const values = organizations.map(org => ({ value: org.slug, label: org.name }));
+    const values = organizations?.map(org => ({ value: org.slug, label: org.name })) ?? [];
+
 
-    const values = organizations.map(org => ({ value: org.slug, label: org.name }));
 
     const onValueChange = async (slug: string) => {
         await authClient.organization.setActive({ organizationSlug: slug });