POC of page layout component

public/app/core/components/Page/Page.tsx

+// Libraries
+import React, { Component } from 'react';
+
+// Components
+import PageHeader from '../PageHeader/PageHeader';
+import PageContents from './PageContents';
+
+interface Props {
+  title: string;
+  children: JSX.Element[] | JSX.Element;
+}
+
+class Page extends Component<Props> {
+  static Header = PageHeader;
+  static Contents = PageContents;
+
+  render() {
+    return (
+      <div>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default Page;

public/app/core/components/Page/PageContents.tsx

+// Libraries
+import React, { Component } from 'react';
+
+// Components
+import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
+import PageLoader from '../PageLoader/PageLoader';
+
+interface Props {
+  isLoading?: boolean;
+  children: JSX.Element[] | JSX.Element;
+}
+
+class PageContents extends Component<Props> {
+
+  render() {
+    const { isLoading } = this.props;
+
+    return (
+      <div className="page-container page-body">
+        <CustomScrollbar>
+          {isLoading && <PageLoader />}
+          {this.props.children}
+        </CustomScrollbar>
+      </div>
+    );
+  }
+}
+
+export default PageContents;

public/app/core/components/PageLoader/PageLoader.tsx

 import React, { SFC } from 'react';
 
 interface Props {
-  pageName: string;
+  pageName?: string;
 }
 
 const PageLoader: SFC<Props> = ({ pageName }) => {

public/app/features/datasources/DataSourcesListPage.tsx

 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
-import PageHeader from '../../core/components/PageHeader/PageHeader';
-import PageLoader from 'app/core/components/PageLoader/PageLoader';
-import OrgActionBar from '../../core/components/OrgActionBar/OrgActionBar';
-import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
+import Page from 'app/core/components/Page/Page';
+import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar';
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import DataSourcesList from './DataSourcesList';
 import { DataSource, NavModel } from 'app/types';
-import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
+import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
 import { loadDataSources, setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions';
-import { getNavModel } from '../../core/selectors/navModel';
+import { getNavModel } from 'app/core/selectors/navModel';
 import {
   getDataSources,
   getDataSourcesCount,
@@ -67,10 +66,10 @@ export class DataSourcesListPage extends PureComponent<Props> {
     };
 
     return (
-      <div>
-        <PageHeader model={navModel} />
-        <div className="page-container page-body">
-          {!hasFetched && <PageLoader pageName="Data sources" />}
+      <Page title="Data Sources">
+        <Page.Header model={navModel} />
+        <Page.Contents isLoading={!hasFetched}>
+          <>
             {hasFetched && dataSourcesCount === 0 && <EmptyListCTA model={emptyListModel} />}
             {hasFetched &&
               dataSourcesCount > 0 && [
@@ -84,8 +83,9 @@ export class DataSourcesListPage extends PureComponent<Props> {
                 />,
                 <DataSourcesList dataSources={dataSources} layoutMode={layoutMode} key="list" />,
               ]}
-        </div>
-      </div>
+          </>
+        </Page.Contents>
+      </Page>
     );
   }
 }