refetch branding logo

Author: liangfung

ee/tabby-ui/app/(dashboard)/settings/general/components/branding-form.tsx

@@ -8,6 +8,7 @@ import { useMutation } from '@/lib/tabby/gql'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { IconCloudUpload, IconSpinner } from '@/components/ui/icons'
+import { mutateBrandingLogo } from '@/components/branding-logo'
 
 const updateBrandingSettingMutation = graphql(/* GraphQL */ `
   mutation UpdateBrandingForGeneralSettings($input: BrandingSettingInput!) {
@@ -85,9 +86,7 @@ export const BrandingForm = () => {
     })
     if (response?.data?.updateBrandingSetting) {
       toast.success('Successfully updated branding logo!')
-      // todo refresh logo
-      // await delay(500)
-      // window.location.reload()
+      mutateBrandingLogo('/branding/logo')
     } else {
       // Handle case where mutation fails but doesn't throw an error
       setIsSubmitting(false)

ee/tabby-ui/components/branding-logo.tsx

@@ -4,8 +4,16 @@ import React from 'react'
 import useSWRImmutable from 'swr/immutable'
 import fetcher from '@/lib/tabby/fetcher'
 import { cn } from '@/lib/utils'
+import { mutate } from 'swr'
 
 const NOT_FOUND_ERROR = 'not_found'
+let hasCustomLogo = true
+
+export const mutateBrandingLogo = (url: string) => {
+  hasCustomLogo = true
+  mutate(url)
+}
+
 interface BrandingLogoProps extends React.HTMLAttributes<HTMLImageElement> {
   customLogoUrl: string
   defaultLogoUrl: string
@@ -29,13 +37,15 @@ export const BrandingLogo = ({
   const {
     data: avatarImageSrc,
     isLoading,
+    error
   } = useSWRImmutable(customLogoUrl, (url: string) => {
-    if (!customLogoUrl) return undefined
+    if (!customLogoUrl || !hasCustomLogo) return undefined
 
     return fetcher(url, {
       responseFormatter: async response => {
         const blob = await response.blob()
         const buffer = Buffer.from(await blob.arrayBuffer())
+        hasCustomLogo = true
         return `data:image/png;base64,${buffer.toString('base64')}`
       },
       errorHandler: response => {
@@ -45,6 +55,11 @@ export const BrandingLogo = ({
     })
   })
 
+  if (error?.message === NOT_FOUND_ERROR) {
+    hasCustomLogo = false
+  }
+
+  // todo fix height mutate
   if (isLoading) {
     // placeholder
     return <div {...props} className={className} />
@@ -53,10 +68,10 @@ export const BrandingLogo = ({
   return <img
     src={avatarImageSrc ?? defaultLogoUrl}
     alt={alt}
-    {...props}
     className={cn(
       className,
       avatarImageSrc ? classNames?.customLogo : classNames?.defaultLogo
     )}
+    {...props}
   />
 }