diff --git a/src/Card/CardCarousel/tests/__snapshots__/CardCarousel.test.jsx.snap b/src/Card/CardCarousel/tests/__snapshots__/CardCarousel.test.jsx.snap
index 2ad5754ef4..d668a3679d 100644
--- a/src/Card/CardCarousel/tests/__snapshots__/CardCarousel.test.jsx.snap
+++ b/src/Card/CardCarousel/tests/__snapshots__/CardCarousel.test.jsx.snap
@@ -108,12 +108,26 @@ exports[`<CardCarousel /> renders card carousel with custom title and subtitles
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -157,12 +171,26 @@ exports[`<CardCarousel /> renders card carousel with custom title and subtitles
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -206,12 +234,26 @@ exports[`<CardCarousel /> renders card carousel with custom title and subtitles
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -255,12 +297,26 @@ exports[`<CardCarousel /> renders card carousel with custom title and subtitles
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -304,12 +360,26 @@ exports[`<CardCarousel /> renders card carousel with custom title and subtitles
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -459,12 +529,26 @@ exports[`<CardCarousel /> renders card carousel with title and subtitles 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -508,12 +592,26 @@ exports[`<CardCarousel /> renders card carousel with title and subtitles 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -557,12 +655,26 @@ exports[`<CardCarousel /> renders card carousel with title and subtitles 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -606,12 +718,26 @@ exports[`<CardCarousel /> renders card carousel with title and subtitles 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -655,12 +781,26 @@ exports[`<CardCarousel /> renders card carousel with title and subtitles 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -799,12 +939,26 @@ exports[`<CardCarousel /> renders default card carousel 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -848,12 +1002,26 @@ exports[`<CardCarousel /> renders default card carousel 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -897,12 +1065,26 @@ exports[`<CardCarousel /> renders default card carousel 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -946,12 +1128,26 @@ exports[`<CardCarousel /> renders default card carousel 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
@@ -995,12 +1191,26 @@ exports[`<CardCarousel /> renders default card carousel 1`] = `
             <div
               className="pgn__card-wrapper-image-cap vertical"
             >
+              <span
+                aria-busy={true}
+                aria-live="polite"
+                className="pgn__card-image-cap-loader show"
+              >
+                <span
+                  className="react-loading-skeleton"
+                  style={
+                    Object {
+                      "height": 140,
+                    }
+                  }
+                >
+                  ‌
+                </span>
+                <br />
+              </span>
               <img
                 className="pgn__card-image-cap"
                 loading="eager"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="http://fake.image"
               />
             </div>
             <div
diff --git a/src/Card/CardImageCap.jsx b/src/Card/CardImageCap.jsx
index e271246e43..88b2406bac 100644
--- a/src/Card/CardImageCap.jsx
+++ b/src/Card/CardImageCap.jsx
@@ -1,12 +1,10 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Skeleton from 'react-loading-skeleton';
 import CardContext from './CardContext';
 import cardSrcFallbackImg from './fallback-default.png';
-
-const SKELETON_HEIGHT_VALUE = 140;
-const LOGO_SKELETON_HEIGHT_VALUE = 41;
+import CardImageWithSkeleton from './CardImageWithSkeleton';
+import { LOGO_SKELETON_HEIGHT_VALUE, SKELETON_HEIGHT_VALUE } from './constants';
 
 const CardImageCap = React.forwardRef(({
   src,
@@ -24,69 +22,41 @@ const CardImageCap = React.forwardRef(({
   imageLoadingType,
 }, ref) => {
   const { orientation, isLoading } = useContext(CardContext);
-  const [showImageCap, setShowImageCap] = useState(false);
-  const [showLogoCap, setShowLogoCap] = useState(false);
-
-  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
-
-  if (isLoading) {
-    return (
-      <div
-        className={classNames(wrapperClassName, className)}
-        data-testid="image-loader-wrapper"
-      >
-        <Skeleton
-          containerClassName="pgn__card-image-cap-loader"
-          height={orientation === 'horizontal' ? '100%' : skeletonHeight}
-          width={skeletonWidth}
-        />
-        {logoSkeleton && (
-          <Skeleton
-            containerClassName="pgn__card-logo-cap"
-            height={logoSkeletonHeight}
-            width={logoSkeletonWidth}
-          />
-        )}
-      </div>
-    );
-  }
-
-  const handleSrcFallback = (event, altSrc, imageKey) => {
-    const { currentTarget } = event;
 
-    if (!altSrc || currentTarget.src.endsWith(altSrc)) {
-      if (imageKey === 'imageCap') {
-        currentTarget.src = cardSrcFallbackImg;
-      } else {
-        setShowLogoCap(false);
-      }
+  const imageSkeletonHeight = useMemo(() => (
+    orientation === 'horizontal' ? '100%' : skeletonHeight
+  ), [orientation, skeletonHeight]);
 
-      return;
-    }
-
-    currentTarget.src = altSrc;
-  };
+  const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
 
   return (
     <div className={classNames(className, wrapperClassName)} ref={ref}>
       {!!src && (
-        <img
-          className={classNames('pgn__card-image-cap', { show: showImageCap })}
+        <CardImageWithSkeleton
           src={src}
-          onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}
-          onLoad={() => setShowImageCap(true)}
           alt={srcAlt}
-          loading={imageLoadingType}
+          fallback={fallbackSrc}
+          className="pgn__card-image-cap"
+          useDefaultSrc
+          withSkeleton
+          skeletonWidth={skeletonWidth}
+          skeletonHeight={imageSkeletonHeight}
+          imageLoadingType={imageLoadingType}
+          skeletonClassName="pgn__card-image-cap-loader"
+          isLoading={isLoading}
         />
       )}
-      {!!logoSrc && (
-        <img
-          className={classNames('pgn__card-logo-cap', { show: showLogoCap })}
+      {!!logoSrc && !isLoading && (
+        <CardImageWithSkeleton
           src={logoSrc}
-          onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}
-          onLoad={() => setShowLogoCap(true)}
           alt={logoAlt}
-          loading={imageLoadingType}
+          fallback={fallbackLogoSrc}
+          withSkeleton={logoSkeleton}
+          className="pgn__card-logo-cap"
+          skeletonWidth={logoSkeletonWidth}
+          skeletonHeight={logoSkeletonHeight}
+          imageLoadingType={imageLoadingType}
+          skeletonClassName="pgn__card-logo-cap"
         />
       )}
     </div>
@@ -109,9 +79,9 @@ CardImageCap.propTypes = {
   /** Specifies logo image alt text. */
   logoAlt: PropTypes.string,
   /** Specifies height of Image skeleton in loading state. */
-  skeletonHeight: PropTypes.number,
+  skeletonHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Specifies width of Image skeleton in loading state. */
-  skeletonWidth: PropTypes.number,
+  skeletonWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Specifies whether the cap should be displayed during loading. */
   logoSkeleton: PropTypes.bool,
   /** Specifies height of Logo skeleton in loading state. */
diff --git a/src/Card/CardImageWithSkeleton.jsx b/src/Card/CardImageWithSkeleton.jsx
new file mode 100644
index 0000000000..8d326217e7
--- /dev/null
+++ b/src/Card/CardImageWithSkeleton.jsx
@@ -0,0 +1,74 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Skeleton from 'react-loading-skeleton';
+
+import Image from '../Image';
+import useImageLoader from '../hooks/useImageLoader';
+
+function CardImageWithSkeleton({
+  src,
+  alt,
+  fallback,
+  className,
+  withSkeleton,
+  useDefaultSrc,
+  skeletonWidth,
+  skeletonHeight,
+  imageLoadingType,
+  skeletonClassName,
+  isLoading = false,
+}) {
+  const config = useMemo(
+    () => ({
+      mainSrc: src, fallbackSrc: fallback, useDefaultSrc,
+    }),
+    [src, fallback, useDefaultSrc],
+  );
+
+  const { ref, isSrcLoading } = useImageLoader(config);
+
+  return (
+    <>
+      <Skeleton
+        containerClassName={classNames(skeletonClassName, { show: (isSrcLoading || isLoading) && withSkeleton })}
+        height={skeletonHeight}
+        width={skeletonWidth}
+      />
+      <Image
+        ref={ref}
+        className={classNames(className, { show: !isSrcLoading && !isLoading })}
+        alt={alt}
+        loading={imageLoadingType}
+      />
+    </>
+  );
+}
+
+CardImageWithSkeleton.propTypes = {
+  className: PropTypes.string,
+  src: PropTypes.string.isRequired,
+  fallback: PropTypes.string,
+  useDefaultSrc: PropTypes.bool,
+  alt: PropTypes.string.isRequired,
+  skeletonHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  skeletonWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  skeletonClassName: PropTypes.string,
+  imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),
+  isLoading: PropTypes.bool,
+  withSkeleton: PropTypes.bool,
+};
+
+CardImageWithSkeleton.defaultProps = {
+  className: undefined,
+  skeletonClassName: undefined,
+  fallback: undefined,
+  useDefaultSrc: false,
+  imageLoadingType: 'eager',
+  skeletonHeight: undefined,
+  skeletonWidth: undefined,
+  isLoading: false,
+  withSkeleton: false,
+};
+
+export default CardImageWithSkeleton;
diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss
index 703e99dc26..5e1c581bd8 100644
--- a/src/Card/_variables.scss
+++ b/src/Card/_variables.scss
@@ -48,7 +48,7 @@ $card-footer-text-font-size:         $x-small-font-size;
 $card-image-horizontal-max-width:    240px !default;
 $card-image-horizontal-min-width:    $card-image-horizontal-max-width !default;
 $card-image-vertical-max-height:     140px !default;
-$loading-skeleton-spacer:            .313rem !default;
+$loading-skeleton-spacer:            -4px !default;
 
 $card-focus-border-offset:           5px !default;
 $card-focus-border-width:            2px !default;
diff --git a/src/Card/constants.js b/src/Card/constants.js
new file mode 100644
index 0000000000..09a1677f28
--- /dev/null
+++ b/src/Card/constants.js
@@ -0,0 +1,2 @@
+export const SKELETON_HEIGHT_VALUE = 140;
+export const LOGO_SKELETON_HEIGHT_VALUE = 41;
diff --git a/src/Card/index.scss b/src/Card/index.scss
index 56d0269aad..33860726ce 100644
--- a/src/Card/index.scss
+++ b/src/Card/index.scss
@@ -337,10 +337,15 @@ a.pgn__card {
     }
 
     .pgn__card-image-cap-loader {
+      margin-top: $loading-skeleton-spacer;
+      display: none;
+
+      &.show {
+        display: block;
+        height: 100%;
+      }
+
       .react-loading-skeleton {
-        margin-bottom: -$loading-skeleton-spacer;
-        position: relative;
-        top: -$loading-skeleton-spacer;
         height: 100%;
         border-bottom-right-radius: 0;
         border-bottom-left-radius: 0;
diff --git a/src/Card/tests/CardImageCap.test.jsx b/src/Card/tests/CardImageCap.test.jsx
index e459413d65..b46607d21d 100644
--- a/src/Card/tests/CardImageCap.test.jsx
+++ b/src/Card/tests/CardImageCap.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import CardImageCap from '../CardImageCap';
 import CardContext from '../CardContext';
 
@@ -61,71 +61,7 @@ describe('<CardImageCap />', () => {
       />,
     );
 
-    expect(screen.getByAltText('Src alt text').src).toEqual('http://src.image/');
-    expect(screen.getByAltText('Logo alt text').src).toEqual('http://logo.image/');
-  });
-
-  it('render with loading state', () => {
-    render(
-      <CardImageCapWrapper
-        src="http://fake.image"
-        logoSrc="http://fake.image"
-        srcAlt="Src alt text"
-        logoAlt="Logo alt text"
-        isLoading
-        logoSkeleton
-      />,
-    );
-
-    expect(screen.queryByAltText('Src alt text')).toBeNull();
-    expect(screen.queryByAltText('Logo alt text')).toBeNull();
-
-    expect(screen.getByTestId('image-loader-wrapper')).toBeInTheDocument();
-    expect(screen.getByTestId('image-loader-wrapper').firstChild).toHaveClass('pgn__card-image-cap-loader');
-    expect(screen.getByTestId('image-loader-wrapper').lastChild).toHaveClass('pgn__card-logo-cap');
-  });
-
-  it('replaces image with fallback one in case of error', () => {
-    render(
-      <CardImageCapWrapper
-        src="http://src.image/"
-        srcAlt="Src alt text"
-        fallbackSrc="http://src.image.fallback/"
-        logoSrc="http://logo.image/"
-        fallbackLogoSrc="http://logo.image.fallback/"
-        logoAlt="Logo alt text"
-      />,
-    );
-    const srcImg = screen.getByAltText('Src alt text');
-    expect(srcImg.src).toEqual('http://src.image/');
-    fireEvent.load(srcImg);
-    fireEvent.error(srcImg);
-    expect(srcImg.src).toEqual('http://src.image.fallback/');
-
-    const logoImg = screen.getByAltText('Logo alt text');
-    expect(logoImg.src).toEqual('http://logo.image/');
-    fireEvent.load(srcImg);
-    fireEvent.error(logoImg);
-    expect(logoImg.src).toEqual('http://logo.image.fallback/');
-  });
-
-  it('hiding component if it isn`t fallbackLogoSrc and logoSrc don`t work', () => {
-    render(<CardImageCapWrapper logoSrc="fakeURL" logoAlt="Logo alt text" />);
-
-    const logoImg = screen.getByAltText('Logo alt text');
-    fireEvent.load(logoImg);
-    expect(logoImg.className).toEqual('pgn__card-logo-cap show');
-    fireEvent.error(logoImg);
-    expect(logoImg.className).toEqual('pgn__card-logo-cap');
-  });
-
-  it('hiding component if it isn`t fallbackSrc and src don`t work', () => {
-    render(<CardImageCapWrapper src="fakeURL" fallbackSrc="fakeURL" srcAlt="Src alt text" />);
-
-    const srcImg = screen.getByAltText('Src alt text');
-    fireEvent.load(srcImg);
-    fireEvent.error(srcImg);
-    // test-file-stub is what our fileMock.js returns for all images
-    expect(srcImg.src.endsWith('test-file-stub')).toEqual(true);
+    expect(screen.getByAltText('Src alt text')).toBeInTheDocument();
+    expect(screen.getByAltText('Logo alt text')).toBeInTheDocument();
   });
 });
diff --git a/src/Card/tests/__snapshots__/CardDeck.test.jsx.snap b/src/Card/tests/__snapshots__/CardDeck.test.jsx.snap
index b5bc5b8e96..58b0c978d5 100644
--- a/src/Card/tests/__snapshots__/CardDeck.test.jsx.snap
+++ b/src/Card/tests/__snapshots__/CardDeck.test.jsx.snap
@@ -18,12 +18,26 @@ exports[`<CardDeck /> has tabIndex="-1" when \`hasInteractiveChildren\` is true
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -67,12 +81,26 @@ exports[`<CardDeck /> has tabIndex="-1" when \`hasInteractiveChildren\` is true
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -116,12 +144,26 @@ exports[`<CardDeck /> has tabIndex="-1" when \`hasInteractiveChildren\` is true
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -165,12 +207,26 @@ exports[`<CardDeck /> has tabIndex="-1" when \`hasInteractiveChildren\` is true
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -214,12 +270,26 @@ exports[`<CardDeck /> has tabIndex="-1" when \`hasInteractiveChildren\` is true
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -275,12 +345,26 @@ exports[`<CardDeck /> renders default columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -324,12 +408,26 @@ exports[`<CardDeck /> renders default columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -373,12 +471,26 @@ exports[`<CardDeck /> renders default columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -422,12 +534,26 @@ exports[`<CardDeck /> renders default columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -471,12 +597,26 @@ exports[`<CardDeck /> renders default columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -532,12 +672,26 @@ exports[`<CardDeck /> renders with controlled columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -581,12 +735,26 @@ exports[`<CardDeck /> renders with controlled columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -630,12 +798,26 @@ exports[`<CardDeck /> renders with controlled columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -679,12 +861,26 @@ exports[`<CardDeck /> renders with controlled columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -728,12 +924,26 @@ exports[`<CardDeck /> renders with controlled columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -789,12 +999,26 @@ exports[`<CardDeck /> renders with disabled equal height 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -838,12 +1062,26 @@ exports[`<CardDeck /> renders with disabled equal height 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -887,12 +1125,26 @@ exports[`<CardDeck /> renders with disabled equal height 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -936,12 +1188,26 @@ exports[`<CardDeck /> renders with disabled equal height 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -985,12 +1251,26 @@ exports[`<CardDeck /> renders with disabled equal height 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -1026,4 +1306,4 @@ exports[`<CardDeck /> renders with disabled equal height 1`] = `
     </div>
   </div>
 </div>
-`;
\ No newline at end of file
+`;
diff --git a/src/Card/tests/__snapshots__/CardGrid.test.jsx.snap b/src/Card/tests/__snapshots__/CardGrid.test.jsx.snap
index 65425dd9d7..0369e7579c 100644
--- a/src/Card/tests/__snapshots__/CardGrid.test.jsx.snap
+++ b/src/Card/tests/__snapshots__/CardGrid.test.jsx.snap
@@ -17,12 +17,26 @@ exports[`<CardGrid /> Controlled Rendering renders with controlled columnSizes 1
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -73,12 +87,26 @@ exports[`<CardGrid /> Controlled Rendering renders with disabled equal height 1`
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -129,12 +157,26 @@ exports[`<CardGrid /> Uncontrolled Rendering renders default columnSizes 1`] = `
         <div
           className="pgn__card-wrapper-image-cap vertical"
         >
+          <span
+            aria-busy={true}
+            aria-live="polite"
+            className="pgn__card-image-cap-loader show"
+          >
+            <span
+              className="react-loading-skeleton"
+              style={
+                Object {
+                  "height": 140,
+                }
+              }
+            >
+              ‌
+            </span>
+            <br />
+          </span>
           <img
             className="pgn__card-image-cap"
             loading="eager"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="http://fake.image"
           />
         </div>
         <div
@@ -166,4 +208,4 @@ exports[`<CardGrid /> Uncontrolled Rendering renders default columnSizes 1`] = `
     </div>
   </div>
 </div>
-`;
\ No newline at end of file
+`;
diff --git a/src/Card/tests/__snapshots__/CardImageCap.test.jsx.snap b/src/Card/tests/__snapshots__/CardImageCap.test.jsx.snap
index ad20491c2a..736696b4fb 100644
--- a/src/Card/tests/__snapshots__/CardImageCap.test.jsx.snap
+++ b/src/Card/tests/__snapshots__/CardImageCap.test.jsx.snap
@@ -1,16 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<CardImageCap /> renders with loading equals lazy 1`] = `
+<div
+  className="pgn__card-wrapper-image-cap vertical"
+>
+  <span
+    aria-busy={true}
+    aria-live="polite"
+    className="pgn__card-image-cap-loader show"
+  >
+    <span
+      className="react-loading-skeleton"
+      style={
+        Object {
+          "height": 140,
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>
+  <img
+    className="pgn__card-image-cap"
+    loading="lazy"
+  />
+  <span
+    aria-busy={true}
+    aria-live="polite"
+    className="pgn__card-logo-cap"
+  >
+    <span
+      className="react-loading-skeleton"
+      style={
+        Object {
+          "height": 41,
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>
+  <img
+    alt="Logo alt"
+    className="pgn__card-logo-cap"
+    loading="lazy"
+  />
+</div>
+`;
+
 exports[`<CardImageCap /> renders with scr prop and srcAlt 1`] = `
 <div
   className="pgn__card-wrapper-image-cap vertical"
 >
+  <span
+    aria-busy={true}
+    aria-live="polite"
+    className="pgn__card-image-cap-loader show"
+  >
+    <span
+      className="react-loading-skeleton"
+      style={
+        Object {
+          "height": 140,
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>
   <img
     alt="Alt text"
     className="pgn__card-image-cap"
     loading="eager"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="http://fake.image"
   />
 </div>
 `;
@@ -19,12 +83,26 @@ exports[`<CardImageCap /> renders with scr prop in horizontal orientation 1`] =
 <div
   className="pgn__card-wrapper-image-cap horizontal"
 >
+  <span
+    aria-busy={true}
+    aria-live="polite"
+    className="pgn__card-image-cap-loader show"
+  >
+    <span
+      className="react-loading-skeleton"
+      style={
+        Object {
+          "height": "100%",
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>
   <img
     className="pgn__card-image-cap"
     loading="eager"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="http://fake.image"
   />
 </div>
 `;
@@ -33,19 +111,47 @@ exports[`<CardImageCap /> renders with src and logoSrc prop in horizontal orient
 <div
   className="pgn__card-wrapper-image-cap horizontal"
 >
+  <span
+    aria-busy={true}
+    aria-live="polite"
+    className="pgn__card-image-cap-loader show"
+  >
+    <span
+      className="react-loading-skeleton"
+      style={
+        Object {
+          "height": "100%",
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>
   <img
     className="pgn__card-image-cap"
     loading="eager"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="http://fake.image"
   />
+  <span
+    aria-busy={true}
+    aria-live="polite"
+    className="pgn__card-logo-cap"
+  >
+    <span
+      className="react-loading-skeleton"
+      style={
+        Object {
+          "height": 41,
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>
   <img
     className="pgn__card-logo-cap"
     loading="eager"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="http://fake.image"
   />
 </div>
 `;
@@ -54,42 +160,48 @@ exports[`<CardImageCap /> renders with src, logoSrc and logoAlt props 1`] = `
 <div
   className="pgn__card-wrapper-image-cap vertical"
 >
+  <span
+    aria-busy={true}
+    aria-live="polite"
+    className="pgn__card-image-cap-loader show"
+  >
+    <span
+      className="react-loading-skeleton"
+      style={
+        Object {
+          "height": 140,
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>
   <img
     className="pgn__card-image-cap"
     loading="eager"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="http://fake.image"
   />
+  <span
+    aria-busy={true}
+    aria-live="polite"
+    className="pgn__card-logo-cap"
+  >
+    <span
+      className="react-loading-skeleton"
+      style={
+        Object {
+          "height": 41,
+        }
+      }
+    >
+      ‌
+    </span>
+    <br />
+  </span>
   <img
     alt="Logo alt"
     className="pgn__card-logo-cap"
     loading="eager"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="http://fake.image"
   />
 </div>
 `;
-
-exports[`<CardImageCap /> renders with loading equals lazy 1`] = `
-<div
-  className="pgn__card-wrapper-image-cap vertical"
->
-  <img
-    className="pgn__card-image-cap"
-    loading="lazy"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="http://fake.image"
-  />
-  <img
-    alt="Logo alt"
-    className="pgn__card-logo-cap"
-    loading="lazy"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="http://fake.image"
-  />
-</div>
-`;
\ No newline at end of file
diff --git a/src/declaration.d.ts b/src/declaration.d.ts
new file mode 100644
index 0000000000..e2937d470e
--- /dev/null
+++ b/src/declaration.d.ts
@@ -0,0 +1 @@
+declare module '*.png';
diff --git a/src/hooks/tests/useImageLoader.test.jsx b/src/hooks/tests/useImageLoader.test.jsx
new file mode 100644
index 0000000000..ce4d8b69e5
--- /dev/null
+++ b/src/hooks/tests/useImageLoader.test.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  render, screen, act, waitFor, fireEvent,
+} from '@testing-library/react';
+import { Image } from '../..';
+
+import useImageLoader from '../useImageLoader';
+
+const MAIN_SRC = 'main-source.jpg';
+const FALLBACK_SRC = 'fallback-source.jpg';
+const ALT_TEXT = 'test';
+const TEST_ID = 'loading-indicator';
+
+function TestComponent({
+// eslint-disable-next-line react/prop-types
+  mainSrc, fallbackSrc, alt, ...rest
+}) {
+  const { ref, isSrcLoading } = useImageLoader({ mainSrc, fallbackSrc, ...rest });
+  return (
+    <>
+      {isSrcLoading && <div data-testid={TEST_ID}>Loading...</div>}
+      <Image ref={ref} alt={alt} />
+    </>
+  );
+}
+
+describe('useImageLoader', () => {
+  describe('should set loading state to false', () => {
+    it('when the main source loads successfully and update img src', async () => {
+      render(<TestComponent mainSrc={MAIN_SRC} fallbackSrc={FALLBACK_SRC} alt={ALT_TEXT} />);
+      const imgElement = screen.getByAltText(ALT_TEXT);
+
+      expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+
+      await act(async () => {
+        fireEvent.load(imgElement);
+      });
+
+      await waitFor(() => expect(screen.queryByTestId(TEST_ID)).not.toBeInTheDocument());
+
+      expect(imgElement.src).toContain(MAIN_SRC);
+    });
+
+    it('when the main source fails to load and falls back to the fallback source, and update img src', async () => {
+      render(<TestComponent mainSrc={MAIN_SRC} fallbackSrc={FALLBACK_SRC} alt={ALT_TEXT} />);
+      const imgElement = screen.getByAltText(ALT_TEXT);
+
+      expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+
+      await act(async () => {
+        fireEvent.error(imgElement);
+      });
+
+      expect(imgElement.src).toContain(FALLBACK_SRC);
+    });
+  });
+});
diff --git a/src/hooks/useImageLoader.jsx b/src/hooks/useImageLoader.jsx
new file mode 100644
index 0000000000..76c75e9c6d
--- /dev/null
+++ b/src/hooks/useImageLoader.jsx
@@ -0,0 +1,72 @@
+import { useState, useEffect, useRef } from 'react';
+import cardSrcFallbackImg from '../Card/fallback-default.png';
+
+const useImageLoader = ({
+  mainSrc,
+  fallbackSrc,
+  useDefaultSrc = false,
+}) => {
+  const ref = useRef(null);
+  const [isSrcLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if ((!mainSrc && !fallbackSrc) || !ref.current) {
+      return;
+    }
+    const img = ref.current;
+
+    const loadImageWithRetry = async (src) => {
+      setIsLoading(true);
+
+      await new Promise((resolve, reject) => {
+        img.onload = () => resolve();
+        img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+        img.src = src;
+      });
+    };
+
+    const loadImage = async () => {
+      let imageSrc = null;
+      const sources = [mainSrc];
+
+      if (fallbackSrc) {
+        sources.push(fallbackSrc);
+      }
+
+      // Add default image source if useDefaultSrc is true
+      if (useDefaultSrc) {
+        sources.push(cardSrcFallbackImg);
+      }
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const src of sources) {
+        if (!src) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
+        try {
+          // eslint-disable-next-line no-await-in-loop
+          await loadImageWithRetry(src);
+          imageSrc = src;
+          break;
+        } catch (error) {
+          console.error(error);
+          // Continue to the next source if loading fails
+        }
+      }
+      return imageSrc;
+    };
+
+    const loadImages = async () => {
+      await loadImage();
+      setIsLoading(false);
+    };
+
+    loadImages();
+  }, [mainSrc, fallbackSrc, useDefaultSrc]);
+
+  return { ref, isSrcLoading };
+};
+
+export default useImageLoader;
diff --git a/src/hooks/useImageLoader.mdx b/src/hooks/useImageLoader.mdx
new file mode 100644
index 0000000000..45b3e52c31
--- /dev/null
+++ b/src/hooks/useImageLoader.mdx
@@ -0,0 +1,46 @@
+---
+title: 'useImageLoader'
+type: 'hook'
+categories:
+- Hooks
+components:
+- useImageLoader
+status: 'New'
+designStatus: 'Done'
+devStatus: 'Done'
+notes: ''
+---
+
+## Base Usage
+This hook designed to simplify the loading and handling of images. It provides a convenient
+way to asynchronously load images with fallbacks and retry mechanisms, making it robust for scenarios where primary
+image sources may fail.
+
+```jsx live
+
+() => {
+  const MyImageComponent = ({ mainSrc, fallbackSrc, alt, useDefaultSrc }) => {
+    const { ref, isSrcLoading } = useImageLoader({
+      mainSrc,
+      fallbackSrc,
+      useDefaultSrc,
+    });
+
+    return (
+      <div>
+        {isSrcLoading && <div>Loading...</div>}
+        <Image ref={ref} alt={alt} />
+      </div>
+    );
+  }
+
+  return (
+    <MyImageComponent
+      mainSrc="https://picsum.photos/360/200/"
+      fallbackSrc="https://picsum.photos/360/200/"
+      alt="Image Alt Text"
+      useDefaultSrc
+    />
+  );
+}
+```
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index a25410d8f9..cfde7bd75d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -166,6 +166,7 @@ export { default as useToggle } from './hooks/useToggle';
 export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigation';
 export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChild';
 export { default as useIsVisible } from './hooks/useIsVisible';
+export { default as useImageLoader } from './hooks/useImageLoader';
 export {
   OverflowScrollContext,
   OverflowScroll,