feat(events-v2): Add better looking reloading states

src/sentry/static/sentry/app/components/loading/loadingContainer.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+
+import LoadingIndicator from 'app/components/loadingIndicator';
+
+export default function LoadingContainer(props) {
+  const {children, isReloading, isLoading} = props;
+
+  const isLoadingOrReloading = isLoading || isReloading;
+
+  return (
+    <Container>
+      {isLoadingOrReloading && (
+        <div>
+          <LoadingMask isReloading={isReloading} />
+          <Indicator />
+        </div>
+      )}
+      {children}
+    </Container>
+  );
+}
+
+LoadingContainer.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  isReloading: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+};
+
+LoadingContainer.defaultProps = {
+  isLoading: false,
+  isReloading: false,
+};
+
+const Container = styled('div')`
+  position: relative;
+`;
+
+const LoadingMask = styled('div')`
+  position: absolute;
+  z-index: 1;
+  background-color: ${p => p.theme.white};
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+  opacity: ${p => (p.isReloading ? '0.6' : '1')};
+`;
+
+const Indicator = styled(LoadingIndicator)`
+  position: absolute;
+  z-index: 3;
+  width: 100%;
+`;

src/sentry/static/sentry/app/views/organizationEventsV2/events.jsx

@@ -30,6 +30,8 @@ export default class Events extends AsyncComponent {
     view: SentryTypes.EventView.isRequired,
   };
 
+  shouldReload = true;
+
   componentDidUpdate(prevProps, prevContext) {
     // Do not update if we are just opening/closing the modal
     const locationHasChanged = !isEqual(

src/sentry/static/sentry/app/views/organizationEventsV2/table.jsx

@@ -4,8 +4,8 @@ import styled, {css} from 'react-emotion';
 
 import SentryTypes from 'app/sentryTypes';
 import {Panel, PanelHeader, PanelBody, PanelItem} from 'app/components/panels';
-import LoadingIndicator from 'app/components/loadingIndicator';
 import EmptyStateWarning from 'app/components/emptyStateWarning';
+import LoadingContainer from 'app/components/loading/loadingContainer';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 
@@ -23,14 +23,14 @@ export default class Table extends React.Component {
   };
 
   renderBody() {
-    const {view, data, isLoading, organization, onSearch, location} = this.props;
+    const {view, data, organization, onSearch, location} = this.props;
     const {fields} = view.data;
 
-    if (isLoading) {
-      return <LoadingIndicator />;
+    if (!data) {
+      return null;
     }
 
-    if (data && data.length === 0) {
+    if (data.length === 0) {
       return (
         <EmptyStateWarning>
           <p>{t('No results found')}</p>
@@ -56,7 +56,11 @@ export default class Table extends React.Component {
   }
 
   render() {
-    const {fields} = this.props.view.data;
+    const {isLoading, view, data} = this.props;
+    const {fields} = view.data;
+
+    // If previous state was empty, don't show the reloading state
+    const isReloading = !!(data && data.length) && isLoading;
 
     return (
       <Panel>
@@ -69,7 +73,11 @@ export default class Table extends React.Component {
             </HeaderItem>
           ))}
         </TableHeader>
-        <PanelBody>{this.renderBody()}</PanelBody>
+        <PanelBody>
+          <LoadingContainer isLoading={isLoading} isReloading={isReloading}>
+            {this.renderBody()}
+          </LoadingContainer>
+        </PanelBody>
       </Panel>
     );
   }

tests/js/spec/components/loading/loadingContainer.spec.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {mount} from 'enzyme';
+
+import LoadingContainer from 'app/components/loading/loadingContainer';
+
+describe('LoadingContainer', function() {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mount(
+      <LoadingContainer>
+        <div>hello!</div>
+      </LoadingContainer>
+    );
+  });
+
+  it('handles normal state', () => {
+    expect(wrapper.text()).toBe('hello!');
+    expect(wrapper.find('LoadingIndicator')).toHaveLength(0);
+  });
+
+  it('handles loading state', () => {
+    wrapper.setProps({isLoading: true});
+    expect(wrapper.text()).toBe('hello!');
+    expect(wrapper.find('LoadingIndicator')).toHaveLength(1);
+    wrapper.setProps({children: null});
+    expect(wrapper.text()).toBe('');
+    expect(wrapper.find('LoadingIndicator')).toHaveLength(1);
+  });
+
+  it('handles reloading state', () => {
+    wrapper.setProps({isReloading: true});
+    expect(wrapper.text()).toBe('hello!');
+    expect(wrapper.find('LoadingIndicator')).toHaveLength(1);
+    wrapper.setProps({children: null});
+    expect(wrapper.text()).toBe('');
+    expect(wrapper.find('LoadingIndicator')).toHaveLength(1);
+  });
+});