updated the no data placeholders for landing page widgets (#13939)

2025-09-01 13:13:10 +00:00 · 2023-11-10 21:45:55 +05:30 · 2023-11-10 21:45:55 +05:30 · 0209770e9a
commit 0209770e9a
parent 3076a5cce8
16 changed files with 137 additions and 33 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/KPI-not-data-placeholder.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/KPI-not-data-placeholder.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.66667 21.8333V14.7499M14.3333 21.8333V10.4999M20 21.8333V18.9999M14.3333 4.83325H5.83333C4.26853 4.83325 3 6.10178 3 7.66659V24.6666C3 26.2314 4.26853 27.4999 5.83333 27.4999H22.8333C24.3982 27.4999 25.6667 26.2314 25.6667 24.6666V16.1666" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.25 2V6.25M24.25 6.25V10.5M24.25 6.25H28.5M24.25 6.25H20" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/activity-feed-no-data-placeholder.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/activity-feed-no-data-placeholder.svg
@ -0,0 +1,7 @@
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="4" width="28" height="22.6154" rx="3" stroke="#757575" stroke-width="1.5"/>
+<circle cx="6.92305" cy="12.0768" r="2.69231" stroke="#757575" stroke-width="1.5"/>
+<circle cx="6.92305" cy="19.6154" r="2.69231" stroke="#757575" stroke-width="1.5"/>
+<path d="M12.8462 12.6155H25.2308" stroke="#757575" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12.8462 20.1538H25.2308" stroke="#757575" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/announcment-no-data-placeholder.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/announcment-no-data-placeholder.svg
@ -0,0 +1,10 @@
+<svg viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6190_80231)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5759 0.488719C25.7559 0.121672 26.1582 -0.0689215 26.5677 0.0228442C26.9665 0.118141 27.2471 0.472844 27.2471 0.88225V8.91344C29.2588 9.32284 30.7765 11.1052 30.7765 13.2352C30.7765 15.3652 29.2588 17.1493 27.2471 17.5587V25.5881C27.2471 25.9975 26.9665 26.354 26.5677 26.4475C26.5011 26.4629 26.433 26.4706 26.3647 26.4705C26.0347 26.4705 25.7277 26.287 25.5759 25.9834C22.3271 19.4875 15.8418 19.4117 15.7765 19.4117H9.60002V28.2352H10.9712C10.7859 26.827 10.6977 24.3758 11.963 22.7558C12.7818 21.7075 13.9888 21.1764 15.5559 21.1764V22.9411C14.5482 22.9411 13.8282 23.2358 13.3553 23.8393C12.2806 25.2122 12.6512 27.9617 12.8824 28.9058C12.9477 29.1687 12.8877 29.4475 12.7218 29.6611C12.5541 29.8746 12.2965 29.9999 12.0265 29.9999H8.71766C8.23061 29.9999 7.83532 29.6064 7.83532 29.1176V19.4117H6.95297C4.51943 19.4117 2.54119 17.4334 2.54119 14.9999V14.1176H1.65885C1.17179 14.1175 0.776489 13.724 0.776489 13.2352C0.776489 12.7481 1.17179 12.3528 1.65883 12.3528H2.54119V11.4705C2.54119 9.0387 4.51943 7.0587 6.95296 7.0587H15.7747C16.0394 7.05695 22.3447 6.94931 25.5759 0.488719ZM25.4824 3.90167C22.44 7.68872 18.4165 8.56048 16.6588 8.76167V17.7105C18.4165 17.9117 22.44 18.7817 25.4824 22.5705V3.90167ZM14.8941 8.82344H6.95296C5.49355 8.82344 4.3059 10.0111 4.3059 11.4705V14.9999C4.3059 16.4593 5.49355 17.647 6.95296 17.647H14.8941V8.82344ZM27.2471 10.7522V15.7199C28.2724 15.3546 29.0118 14.384 29.0118 13.2352C29.0118 12.0864 28.2724 11.1175 27.2471 10.7522Z" fill="#757575"/>
+</g>
+<defs>
+<clipPath id="clip0_6190_80231">
+<rect width="30" height="30" fill="white" transform="translate(0.776489)"/>
+</clipPath>
+</defs>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/data-insight-no-data-placeholder.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/data-insight-no-data-placeholder.svg
@ -0,0 +1,10 @@
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6190_80281)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.2 26.3H25.8V15.5H4.2V26.3ZM1.5 29H28.5V12.8H1.5V29ZM8.25 20.9H21.75V18.2H8.25V20.9ZM4.2 10.1H25.8V7.4H4.2V10.1ZM6.9 4.7H23.1V2H6.9V4.7Z" fill="#757575"/>
+</g>
+<defs>
+<clipPath id="clip0_6190_80281">
+<rect width="27" height="27" fill="white" transform="translate(1.5 2)"/>
+</clipPath>
+</defs>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/following-no-data-placeholder.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/following-no-data-placeholder.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8204 0.0675564C14.3397 0.155384 13.7486 0.499939 13.4302 0.878273C13.2418 1.10122 12.6637 2.26324 11.4944 4.72241C10.5784 6.66137 9.78584 8.29632 9.72737 8.35036C9.66241 8.41792 8.49958 8.6206 5.8751 9.01921C3.80279 9.32998 1.98384 9.634 1.82143 9.68804C1.1848 9.91099 0.645613 10.4785 0.385763 11.2014C0.275327 11.5054 0.255838 11.6946 0.275327 12.1877C0.314304 13.289 0.268831 13.2282 3.50396 16.5048C5.04358 18.0654 6.30385 19.3828 6.30385 19.4369C6.30385 19.4909 6.02451 21.2272 5.68021 23.2945C5.02409 27.2198 4.97212 27.7467 5.16051 28.3007C5.40737 29.0168 6.01152 29.6452 6.68713 29.8884C7.07041 30.0235 7.9409 30.0167 8.32418 29.8681C8.49308 29.8073 10.1171 28.9358 11.9426 27.9426L15.2557 26.1321L15.7039 26.3618C15.9443 26.4901 17.4579 27.3143 19.0625 28.1926C20.6671 29.0709 22.1157 29.8343 22.2781 29.8951C22.8693 30.1046 23.7918 29.9897 24.3374 29.6452C24.6493 29.4492 25.13 28.875 25.2859 28.5237C25.3768 28.3075 25.4288 28.0102 25.4483 27.6251C25.4743 27.1252 25.3963 26.5644 24.8571 23.2945C24.5128 21.234 24.2335 19.4977 24.2335 19.4369C24.2335 19.3761 25.4938 18.0587 27.0334 16.5048C30.2685 13.2282 30.223 13.289 30.262 12.1877C30.2815 11.6946 30.262 11.5054 30.1516 11.2014C29.8852 10.4717 29.3526 9.91099 28.7029 9.68804C28.534 9.62724 26.7086 9.32322 24.6493 9.01245C21.5895 8.54629 20.8749 8.42468 20.7905 8.32334C20.7255 8.25578 19.9525 6.66813 19.069 4.78997C18.179 2.91182 17.3735 1.24985 17.2695 1.10122C16.9187 0.553988 16.3341 0.182409 15.652 0.0608025C15.4246 0.0270214 15.2232 -1.90735e-06 15.2037 -1.90735e-06C15.1842 0.00675392 15.0153 0.0337772 14.8204 0.0675564ZM17.2111 5.952C18.7117 9.10703 18.9975 9.66778 19.2574 9.93801C19.842 10.5461 19.8225 10.5393 24.0451 11.1811C26.1304 11.4919 27.9039 11.7824 27.9883 11.8162C28.0858 11.8635 28.1313 11.9378 28.1313 12.0661C28.1313 12.2283 27.6895 12.7012 25.3379 15.0793C22.8238 17.6263 22.5315 17.9438 22.3431 18.3424C21.9793 19.0991 21.9923 19.2545 22.7264 23.6391C23.1356 26.0983 23.35 27.4968 23.311 27.5711C23.1616 27.8954 23.1551 27.8886 19.6342 25.9632C16.3276 24.1593 15.8014 23.9093 15.2687 23.9093C14.736 23.9093 14.2163 24.1526 10.9617 25.9361C9.12972 26.936 7.56412 27.7602 7.49916 27.7602C7.32376 27.7602 7.21332 27.6319 7.21332 27.4224C7.21332 27.3211 7.49266 25.5578 7.83696 23.4972C8.54506 19.2342 8.55155 19.0923 8.18776 18.3289C8.01236 17.9506 7.67456 17.5858 5.19949 15.0793C2.85434 12.708 2.4061 12.2283 2.4061 12.0661C2.4061 11.9378 2.45157 11.8635 2.55551 11.8162C2.63347 11.7824 4.40045 11.4986 6.47275 11.1811C10.7343 10.5393 10.7018 10.5461 11.2995 9.89748C11.5853 9.57319 11.8452 9.07325 13.3458 5.91146L15.0608 2.29027H15.2687H15.4701L17.2111 5.952Z" fill="#757575"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/my-data-no-data-placeholder.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/my-data-no-data-placeholder.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 24.5714H5.89999V20.8571H2V24.5714ZM8.5 24.5714H28V20.8571H8.5V24.5714ZM2 17.1429H5.89999V13.4286H2V17.1429ZM8.5 17.1429H28V13.4286H8.5V17.1429ZM2 9.71429H5.89999V6H2V9.71429ZM8.5 9.71429H28V6H8.5V9.71429Z" fill="#757575"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/recently-viewed-no-data-placeholder.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/recently-viewed-no-data-placeholder.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.25753 4.87328L6.05234 5.13296C6.14119 4.81628 6.20676 4.56716 6.25118 4.37926L6.45002 3.53479C6.6531 2.92254 6.52195 2.55731 5.91062 2.35252C5.44948 2.27441 5.04333 2.34196 4.84026 2.74942L3.86298 6.86202C3.7276 7.34759 3.68106 7.71072 4.29239 7.9155L8.12325 8.88665C8.73669 9.08932 9.17456 8.83176 9.35013 8.32507C9.52147 7.81628 9.14706 7.31593 8.69015 7.22303L7.0677 6.80502C7.21789 6.69735 7.20731 6.6319 7.42096 6.46301C9.84935 4.56294 11.952 3.53267 14.6025 3.53267C20.7158 3.53267 26.0781 9.02599 26.0781 15.1273C26.0781 21.2308 20.7158 26.6185 14.6025 26.6185C8.4892 26.6185 3.12685 21.2308 3.12685 15.1273C3.12685 14.5172 2.72494 14.0295 2.11149 14.0295C1.50017 14.0295 1.12787 14.5172 1.12787 15.1273C1.12787 22.4532 7.26442 28.6305 14.6025 28.6305C21.9384 28.6305 28.1279 22.4342 28.1279 15.1104C28.1279 7.78672 22.2684 1.63049 14.6279 1.63049C11.5347 1.65333 8.55698 2.80617 6.25753 4.87117V4.87328ZM12.9948 10.8078V17.228C12.9948 17.8402 13.4031 18.2456 14.0144 18.2456H18.6428C19.2562 18.2456 19.637 17.8381 19.637 17.228C19.637 16.6178 19.2562 16.3328 18.6428 16.3328H14.9832V10.8099C14.9832 10.1998 14.6363 9.7818 14.0229 9.7818C13.4116 9.7818 12.997 10.1998 12.997 10.8099L12.9948 10.8078Z" fill="#757575"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedListV1.component.tsx
@ -14,8 +14,7 @@ import { Typography } from 'antd';
 import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as ActivityFeedIcon } from '../../../assets/svg/activity-feed.svg';
-import { ReactComponent as TaskIcon } from '../../../assets/svg/ic-task.svg';
+import { ReactComponent as FeedEmptyIcon } from '../../../assets/svg/activity-feed-no-data-placeholder.svg';
 import ErrorPlaceHolder from '../../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import Loader from '../../../components/Loader/Loader';
 import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
@ -74,13 +73,7 @@ const ActivityFeedListV1 = ({
      data-testid="no-data-placeholder-container"
      id="feedData">
      <ErrorPlaceHolder
-        icon={
-          isTaskTab ? (
-            <TaskIcon height={24} width={24} />
-          ) : (
-            <ActivityFeedIcon height={SIZE.MEDIUM} width={SIZE.MEDIUM} />
-          )
-        }
+        icon={<FeedEmptyIcon height={SIZE.X_SMALL} width={SIZE.X_SMALL} />}
        type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
        <Typography.Paragraph
          className="tw-max-w-md"
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EmptyGraphPlaceholder.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EmptyGraphPlaceholder.tsx
@ -12,18 +12,22 @@
 */

 import { Typography } from 'antd';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { DATA_INSIGHT_DOCS } from '../../constants/docs.constants';
 import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../enums/common.enum';
 import { Transi18next } from '../../utils/CommonUtils';
 import ErrorPlaceHolder from '../common/ErrorWithPlaceholder/ErrorPlaceHolder';

-export const EmptyGraphPlaceholder = () => {
+export const EmptyGraphPlaceholder = ({ icon }: { icon?: ReactElement }) => {
  const { t } = useTranslation();

  return (
-    <ErrorPlaceHolder size={SIZE.MEDIUM} type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+    <ErrorPlaceHolder
+      icon={icon}
+      size={SIZE.MEDIUM}
+      type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
      <Typography.Paragraph style={{ marginBottom: '0' }}>
        {t('message.adding-new-entity-is-easy-just-give-it-a-spin', {
          entity: t('label.data-insight'),
@ -33,11 +37,10 @@ export const EmptyGraphPlaceholder = () => {
        <Transi18next
          i18nKey="message.refer-to-our-doc"
          renderElement={
-            <a
-              href={DATA_INSIGHT_DOCS}
+            <Link
              rel="noreferrer"
-              style={{ color: '#1890ff' }}
              target="_blank"
+              to={{ pathname: DATA_INSIGHT_DOCS }}
            />
          }
          values={{
--- a/openmetadata-ui/src/main/resources/ui/src/components/KPIWidget/KPIWidget.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/KPIWidget/KPIWidget.component.tsx
@ -17,6 +17,7 @@ import { AxiosError } from 'axios';
 import { isEmpty, isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import {
  CartesianGrid,
  Line,
@ -25,13 +26,14 @@ import {
  XAxis,
  YAxis,
 } from 'recharts';
-import { ReactComponent as KPIIcon } from '../../assets/svg/ic-kpi.svg';
+import { ReactComponent as KPIEmptyIcon } from '../../assets/svg/KPI-not-data-placeholder.svg';
 import {
  CHART_WIDGET_DAYS_DURATION,
  GRAPH_BACKGROUND_COLOR,
 } from '../../constants/constants';
 import { KPI_WIDGET_GRAPH_COLORS } from '../../constants/DataInsight.constants';
 import { DATA_INSIGHT_DOCS } from '../../constants/docs.constants';
+import { SIZE } from '../../enums/common.enum';
 import { WidgetWidths } from '../../enums/CustomizablePage.enum';
 import { Kpi, KpiResult } from '../../generated/dataInsight/kpi/kpi';
 import { UIKpiResult } from '../../interface/data-insight.interface';
@ -56,7 +58,7 @@ const EmptyPlaceholder = () => {

  return (
    <div className="flex-center flex-col h-full p-t-sm">
-      <KPIIcon width={80} />
+      <KPIEmptyIcon width={SIZE.X_SMALL} />
      <div className="m-t-xs text-center">
        <Typography.Paragraph style={{ marginBottom: '0' }}>
          {t('message.adding-new-entity-is-easy-just-give-it-a-spin', {
@ -67,11 +69,10 @@ const EmptyPlaceholder = () => {
          <Transi18next
            i18nKey="message.refer-to-our-doc"
            renderElement={
-              <a
-                href={DATA_INSIGHT_DOCS}
+              <Link
                rel="noreferrer"
-                style={{ color: '#1890ff' }}
                target="_blank"
+                to={{ pathname: DATA_INSIGHT_DOCS }}
              />
            }
            values={{
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx
@ -17,12 +17,14 @@ import { observer } from 'mobx-react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { ReactComponent as MyDataEmptyIcon } from '../../../assets/svg/my-data-no-data-placeholder.svg';
 import {
  getUserPath,
  INITIAL_PAGING_VALUE,
  PAGE_SIZE,
  ROUTES,
 } from '../../../constants/constants';
+import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
 import { SearchIndex } from '../../../enums/search.enum';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
 import { searchData } from '../../../rest/miscAPI';
@ -30,6 +32,7 @@ import { Transi18next } from '../../../utils/CommonUtils';
 import { getEntityName } from '../../../utils/EntityUtils';
 import { getEntityIcon, getEntityLink } from '../../../utils/TableUtils';
 import { useAuthContext } from '../../Auth/AuthProviders/AuthProvider';
+import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { SourceType } from '../../SearchedData/SearchedData.interface';
 import EntityListSkeleton from '../../Skeleton/MyData/EntityListSkeleton/EntityListSkeleton.component';
 import './my-data-widget.less';
@ -127,12 +130,20 @@ const MyDataWidgetInternal = ({
        loading={Boolean(isLoading)}>
        {isEmpty(data) ? (
          <div className="flex-center h-full">
-            <span className="text-center">
-              <Transi18next
-                i18nKey="message.no-owned-data"
-                renderElement={<Link to={ROUTES.EXPLORE} />}
-              />
-            </span>
+            <ErrorPlaceHolder
+              icon={
+                <MyDataEmptyIcon height={SIZE.X_SMALL} width={SIZE.X_SMALL} />
+              }
+              type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+              <Typography.Paragraph
+                className="tw-max-w-md"
+                style={{ marginBottom: '0' }}>
+                <Transi18next
+                  i18nKey="message.no-owned-data"
+                  renderElement={<Link to={ROUTES.EXPLORE} />}
+                />
+              </Typography.Paragraph>
+            </ErrorPlaceHolder>
          </div>
        ) : (
          <div className="entity-list-body">
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/AnnouncementsWidget.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/AnnouncementsWidget.tsx
@ -16,10 +16,13 @@ import { isEmpty, isUndefined } from 'lodash';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as AnnouncementIcon } from '../../../assets/svg/announcements-v1.svg';
+import { ReactComponent as AnnouncementsEmptyIcon } from '../../../assets/svg/announcment-no-data-placeholder.svg';
+import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
 import { Thread } from '../../../generated/entity/feed/thread';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
 import FeedCardBodyV1 from '../../ActivityFeed/ActivityFeedCard/FeedCardBody/FeedCardBodyV1';
 import FeedCardHeaderV1 from '../../ActivityFeed/ActivityFeedCard/FeedCardHeader/FeedCardHeaderV1';
+import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import Loader from '../../Loader/Loader';
 import './announcements-widget.less';

@ -49,9 +52,20 @@ function AnnouncementsWidget({
    if (isEmpty(announcements)) {
      return (
        <div className="flex-center h-full">
-          {t('message.no-entity-data-available', {
-            entity: t('label.announcement-lowercase'),
-          })}
+          <ErrorPlaceHolder
+            icon={
+              <AnnouncementsEmptyIcon
+                height={SIZE.X_SMALL}
+                width={SIZE.X_SMALL}
+              />
+            }
+            type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+            <Typography.Paragraph>
+              {t('message.no-entity-data-available', {
+                entity: t('label.announcement-lowercase'),
+              })}
+            </Typography.Paragraph>
+          </ErrorPlaceHolder>
        </div>
      );
    }
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/FollowingWidget.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/FollowingWidget.tsx
@ -11,15 +11,18 @@
 *  limitations under the License.
 */
 import { CloseOutlined, DragOutlined } from '@ant-design/icons';
-import { Card, Space } from 'antd';
+import { Card, Space, Typography } from 'antd';
 import { isUndefined } from 'lodash';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { ReactComponent as FollowingEmptyIcon } from '../../../assets/svg/following-no-data-placeholder.svg';
 import { getUserPath } from '../../../constants/constants';
+import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
 import { EntityReference } from '../../../generated/entity/type';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
 import { useAuthContext } from '../../Auth/AuthProviders/AuthProvider';
+import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { EntityListWithV1 } from '../../Entity/EntityList/EntityList';
 import './following-widget.less';

@ -78,7 +81,22 @@ function FollowingWidget({
        }
        headerTextLabel={t('label.following')}
        loading={isLoadingOwnedData}
-        noDataPlaceholder={t('message.not-followed-anything')}
+        noDataPlaceholder={
+          <div className="flex-center h-full">
+            <ErrorPlaceHolder
+              icon={
+                <FollowingEmptyIcon
+                  height={SIZE.X_SMALL}
+                  width={SIZE.X_SMALL}
+                />
+              }
+              type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+              <Typography.Paragraph>
+                {t('message.not-followed-anything')}
+              </Typography.Paragraph>
+            </ErrorPlaceHolder>
+          </div>
+        }
        testIDText="following"
      />
    </Card>
--- a/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx
@ -31,8 +31,10 @@ import {
  XAxis,
  YAxis,
 } from 'recharts';
+import { ReactComponent as TotalDataAssetsEmptyIcon } from '../../assets/svg/data-insight-no-data-placeholder.svg';
 import { CHART_WIDGET_DAYS_DURATION } from '../../constants/constants';
 import { TOTAL_ENTITY_CHART_COLOR } from '../../constants/DataInsight.constants';
+import { SIZE } from '../../enums/common.enum';
 import { WidgetWidths } from '../../enums/CustomizablePage.enum';
 import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart';
 import {
@ -134,7 +136,14 @@ const TotalDataAssetsWidget = ({
            </Typography.Text>
          </Col>
          <Col className="h-95" span={24}>
-            <EmptyGraphPlaceholder />
+            <EmptyGraphPlaceholder
+              icon={
+                <TotalDataAssetsEmptyIcon
+                  height={SIZE.X_SMALL}
+                  width={SIZE.X_SMALL}
+                />
+              }
+            />
          </Col>
        </Row>
      ) : (
--- a/openmetadata-ui/src/main/resources/ui/src/components/Widgets/RecentlyViewed/RecentlyViewed.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Widgets/RecentlyViewed/RecentlyViewed.tsx
@ -17,6 +17,8 @@ import { isEmpty, isUndefined } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { ReactComponent as RecentlyViewedEmptyIcon } from '../../../assets/svg/recently-viewed-no-data-placeholder.svg';
+import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../../enums/common.enum';
 import { EntityReference } from '../../../generated/type/entityReference';
 import { WidgetCommonProps } from '../../../pages/CustomizablePage/CustomizablePage.interface';
 import {
@ -25,6 +27,7 @@ import {
 } from '../../../utils/CommonUtils';
 import { getEntityName } from '../../../utils/EntityUtils';
 import { getEntityIcon, getEntityLink } from '../../../utils/TableUtils';
+import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import EntityListSkeleton from '../../Skeleton/MyData/EntityListSkeleton/EntityListSkeleton.component';
 import './recently-viewed.less';

@ -93,7 +96,18 @@ const RecentlyViewed = ({
          </Row>
          {isEmpty(data) ? (
            <div className="flex-center h-full">
-              {t('message.no-recently-viewed-date')}
+              <ErrorPlaceHolder
+                icon={
+                  <RecentlyViewedEmptyIcon
+                    height={SIZE.X_SMALL}
+                    width={SIZE.X_SMALL}
+                  />
+                }
+                type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
+                <Typography.Paragraph>
+                  {t('message.no-recently-viewed-date')}
+                </Typography.Paragraph>
+              </ErrorPlaceHolder>
            </div>
          ) : (
            <div className="entity-list-body">
--- a/openmetadata-ui/src/main/resources/ui/src/enums/common.enum.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/enums/common.enum.ts
@ -12,6 +12,7 @@
 */

 export enum SIZE {
+  X_SMALL = '40',
  SMALL = '60',
  MEDIUM = '86',
  LARGE = '126',