diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx
index a04df6f72e31c3..543730313980c2 100644
--- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx
+++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx
@@ -5,6 +5,7 @@ import {Location} from 'history';
import _EventsRequest from 'app/components/charts/eventsRequest';
import {getInterval} from 'app/components/charts/utils';
+import EmptyStateWarning from 'app/components/emptyStateWarning';
import Link from 'app/components/links/link';
import Tooltip from 'app/components/tooltip';
import Truncate from 'app/components/truncate';
@@ -181,6 +182,9 @@ export function LineChartListWidget(props: Props) {
HeaderActions={provided => (
)}
+ EmptyComponent={() => (
+ {t('No results')}
+ )}
Queries={Queries}
Visualizations={[
{
@@ -319,3 +323,8 @@ const StyledIconClose = styled(IconClose)`
color: ${p => p.theme.gray300};
}
`;
+
+const StyledEmptyStateWarning = styled(EmptyStateWarning)`
+ min-height: 300px;
+ justify-content: center;
+`;
diff --git a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx b/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx
index 3d65d647736a14..6ee0a25436c549 100644
--- a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx
+++ b/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx
@@ -380,6 +380,48 @@ describe('Performance > Widgets > WidgetContainer', function () {
);
});
+ it('Most slow frames widget', async function () {
+ const data = initializeData();
+
+ const wrapper = mountWithTheme(
+ ,
+ data.routerContext
+ );
+ await tick();
+ wrapper.update();
+
+ expect(wrapper.find('div[data-test-id="performance-widget-title"]').text()).toEqual(
+ 'Most Slow Frames'
+ );
+
+ expect(eventsV2Mock).toHaveBeenCalledTimes(1);
+ expect(eventsV2Mock).toHaveBeenNthCalledWith(
+ 1,
+ expect.anything(),
+ expect.objectContaining({
+ query: expect.objectContaining({
+ environment: [],
+ field: [
+ 'transaction',
+ 'project.id',
+ 'epm()',
+ 'p75(measurements.frames_slow_rate)',
+ ],
+ per_page: 3,
+ project: [],
+ query: 'epm():>0.01 p75(measurements.frames_slow_rate):>0',
+ sort: '-p75(measurements.frames_slow_rate)',
+ statsPeriod: '14d',
+ }),
+ })
+ );
+
+ expect(wrapper.find('div[data-test-id="empty-message"]').exists()).toBe(true);
+ });
+
it('Able to change widget type from menu', async function () {
const data = initializeData();