chore: Remove the setTimeout from DenomImage (#360)

There is no point on waiting a second to give an illusion. Images are ready almost instantly and the user does not even see the loading skeleton most of the time. This might also improve CI performance and fix the current failure.
liftedinit · Mar 11, 2025 · 1ee479b · 1ee479b
1 parent 8a1777d
commit 1ee479b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 53 deletions.
diff --git a/components/factory/components/DenomImage.tsx b/components/factory/components/DenomImage.tsx
@@ -74,32 +74,14 @@ export const DenomImage = ({
   withBackground?: boolean;
 }) => {
   const [imageError, setImageError] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
   const [isSupported, setIsSupported] = useState(false);
 
   useEffect(() => {
-    const checkUri = () => {
-      if (denom?.uri) {
-        setIsSupported(isUrlSupported(denom?.uri));
-        // Simulate a delay to show the loading state
-        setTimeout(() => setIsLoading(false), 1000);
-      } else {
-        setIsLoading(false);
-      }
-    };
-
-    checkUri();
+    if (denom?.uri) {
+      setIsSupported(isUrlSupported(denom.uri));
+    }
   }, [denom?.uri]);
 
-  if (isLoading) {
-    return (
-      <div
-        className="skeleton w-11 h-11 rounded-md animate-pulse bg-gray-300"
-        aria-label="denom image skeleton"
-      ></div>
-    );
-  }
-
   // Check for MFX token first
   if (denom?.base === 'umfx' || denom?.base?.includes('uosmo')) {
     return (
@@ -111,7 +93,7 @@ export const DenomImage = ({
           height={44}
           src={denom?.base === 'umfx' ? '/logo.svg' : '/osmosis.svg'}
           alt="MFX Token Icon"
-          className="w-full h-full"
+          className="w-full h-full data-[loaded=false]:animate-pulse data-[loaded=false]:skeleton data-[loaded=false]:bg-gray-300"
         />
       </div>
     );
@@ -133,7 +115,7 @@ export const DenomImage = ({
         src={denom?.uri}
         alt="Token Icon"
         onError={() => setImageError(true)}
-        className="rounded-md w-full h-full"
+        className="rounded-md w-full h-full data-[loaded=false]:animate-pulse data-[loaded=false]:skeleton data-[loaded=false]:bg-gray-300"
       />
     </div>
   );

diff --git a/components/factory/components/__tests__/DenomImage.test.tsx b/components/factory/components/__tests__/DenomImage.test.tsx
@@ -20,13 +20,8 @@ const renderWithProps = (props = {}) => {
 };
 
 describe('DenomImage', () => {
-  let $setTimeout: Mock<typeof setTimeout>;
-
   beforeEach(() => {
-    $setTimeout = spyOn(global, 'setTimeout');
-
     mockModule('next/image', () => ({
-      __esModule: true,
       default: (props: any) => {
         // eslint-disable-next-line @next/next/no-img-element,jsx-a11y/alt-text
         return <img alt="" {...props} />;
@@ -35,22 +30,12 @@ describe('DenomImage', () => {
   });
 
   afterEach(() => {
-    $setTimeout.mockClear();
     clearAllMocks();
     cleanup();
   });
 
-  test('renders loading state correctly', () => {
-    const mockup = renderWithProps();
-    expect(screen.getByLabelText('denom image skeleton')).toBeInTheDocument();
-
-    expect(formatComponent(mockup.asFragment())).toMatchSnapshot();
-  });
-
   test('renders MFX token image correctly', async () => {
     const mockup = renderWithProps();
-    expect($setTimeout).toHaveBeenCalledTimes(1);
-    $setTimeout.mock.calls[0][0]();
     await waitFor(() => expect(document.querySelector('[src=/logo.svg]')).toBeInTheDocument());
     expect(formatComponent(mockup.asFragment())).toMatchSnapshot();
   });
@@ -59,16 +44,12 @@ describe('DenomImage', () => {
     const mockup = renderWithProps({
       denom: { base: 'unsupported', uri: 'https://unsupported.com/token.png' },
     });
-    expect($setTimeout).toHaveBeenCalledTimes(1);
-    $setTimeout.mock.calls[0][0]();
     await waitFor(() => expect(screen.getByAltText('Profile Avatar')).toBeInTheDocument());
     expect(formatComponent(mockup.asFragment())).toMatchSnapshot();
   });
 
   test('renders image from supported URL', async () => {
     const mockup = renderWithProps({ denom: { base: 'supported', uri: uri } });
-    expect($setTimeout).toHaveBeenCalledTimes(1);
-    $setTimeout.mock.calls[0][0]();
     await waitFor(() => expect(document.querySelector(`[src="${uri}"]`)).toBeInTheDocument());
     expect(formatComponent(mockup.asFragment())).toMatchSnapshot();
   });

diff --git a/components/factory/components/__tests__/__snapshots__/DenomImage.test.tsx.snap b/components/factory/components/__tests__/__snapshots__/DenomImage.test.tsx.snap
@@ -1,22 +1,13 @@
 // Bun Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DenomImage renders loading state correctly 1`] = `
-"<DocumentFragment>
-  <div
-    aria-label="denom image skeleton"
-    class="skeleton w-11 h-11 rounded-md animate-pulse bg-gray-300"
-  />
-</DocumentFragment>"
-`;
-
 exports[`DenomImage renders MFX token image correctly 1`] = `
 "<DocumentFragment>
   <div
     class="w-11 h-11 p-2 rounded-md dark:bg-[#ffffff0f] bg-[#0000000a]"
   >
     <img
       alt="MFX Token Icon"
-      class="w-full h-full"
+      class="w-full h-full data-[loaded=false]:animate-pulse data-[loaded=false]:skeleton data-[loaded=false]:bg-gray-300"
       height="44"
       src="/logo.svg"
       width="44"
@@ -43,7 +34,7 @@ exports[`DenomImage renders image from supported URL 1`] = `
   >
     <img
       alt="Token Icon"
-      class="rounded-md w-full h-full"
+      class="rounded-md w-full h-full data-[loaded=false]:animate-pulse data-[loaded=false]:skeleton data-[loaded=false]:bg-gray-300"
       height="44"
       src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdHg1aHVqa3NoMG45bzYwbHR5ODk3b2JqbHhnemlmcXpjOXB0enExMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zHcirZSkw8RSDhawFl/giphy.gif"
       width="44"