Updated panels to be async_components

• Updated:
- panels to be async_components

• Added:
- WrappedBundle

app/javascript/gabsocial/pages/basic_page.js

@@ -1,8 +1,10 @@
 import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
-import LinkFooter from '../components/link_footer'
-import TrendsPanel from '../components/panel/trends_panel'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
+import {
+  LinkFooter,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 export default class BasicPage extends PureComponent {
 
@@ -26,9 +28,9 @@ export default class BasicPage extends PureComponent {
         title={title}
         page={page}
         layout={[
-          <TrendsPanel key='basic-page-trends-panel' />,
-          <WhoToFollowPanel key='basic-page-wtf-panel' />,
-          <LinkFooter key='basic-page-link-footer' />,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />

app/javascript/gabsocial/pages/community_page.js

@@ -1,12 +1,14 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
 import PageTitle from '../features/ui/util/page_title'
-import GroupSidebarPanel from '../components/panel/groups_panel'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import ProgressPanel from '../components/panel/progress_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  GroupSidebarPanel,
+  ProgressPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   community: { 'id': 'column.community', 'defaultMessage': 'Community feed' },
@@ -45,11 +47,11 @@ class CommunityPage extends PureComponent {
           },
         ]}
         layout={[
-          <ProgressPanel key='community-page-progress-panel' />,
-          <TrendsPanel key='community-page-progress-panel' />,
-          <WhoToFollowPanel key='community-page-wtf-panel' />,
-          <GroupSidebarPanel key='community-page-groups-panel' />,
-          <LinkFooter key='community-page-link-footer' />,
+          ProgressPanel,
+          TrendsPanel,
+          WhoToFollowPanel,
+          GroupSidebarPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />

app/javascript/gabsocial/pages/groups_page.js

@@ -2,11 +2,14 @@ import { Fragment } from 'react'
 import { me } from '../initial_state'
 import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
 import Text from '../components/text'
-import GroupsPanel from '../components/panel/groups_panel'
 import DefaultLayout from '../layouts/default_layout'
 import GroupsCollection from '../features/groups_collection'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  GroupsPanel,
+  LinkFooter,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   groups: { id: 'groups', defaultMessage: 'Groups' },
@@ -80,9 +83,9 @@ class GroupsPage extends PureComponent {
     
     const layout = []
     if (!!me) {
-      layout.push(<GroupsPanel key='groups-page-groups-panel' groupType='member' />)
+      layout.push(<WrappedBundle component={GroupsPanel} componentParams={{ groupType: 'member' }} />)
     }
-    layout.push(<LinkFooter key='groups-page-link-footer' />)
+    layout.push(LinkFooter)
 
     return (
       <DefaultLayout

app/javascript/gabsocial/pages/hashtag_page.js

@@ -2,11 +2,13 @@ import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
 import isObject from 'lodash.isobject'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import ProgressPanel from '../components/panel/progress_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  ProgressPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   hashtag: { id: 'hashtag', defaultMessage: 'Hashtag' },
@@ -54,10 +56,10 @@ class HashtagPage extends PureComponent {
           },
         ]}
         layout={[
-          <ProgressPanel key='hashtag-page-progress-panel' />,
-          <TrendsPanel key='hashtag-page-trends-panel' />,
-          <WhoToFollowPanel key='hashtag-page-wtf-panel' />,
-          <LinkFooter key='hashtag-page-link-footer' />,
+          ProgressPanel,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={intl.formatMessage(messages.hashtag)} />

app/javascript/gabsocial/pages/home_page.js

@@ -4,19 +4,22 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants'
 import { me } from '../initial_state'
 import PageTitle from '../features/ui/util/page_title'
-import GroupsPanel from '../components/panel/groups_panel'
-import ListsPanel from '../components/panel/lists_panel'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import ShopPanel from '../components/panel/shop_panel'
-import ProgressPanel from '../components/panel/progress_panel'
-import ProPanel from '../components/panel/pro_panel'
-import UserPanel from '../components/panel/user_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
 import TimelineComposeBlock from '../components/timeline_compose_block'
 import Divider from '../components/divider'
 import PullToRefresher from '../components/pull_to_refresher'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  UserPanel,
+  GroupsPanel,
+  LinkFooter,
+  ListsPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+  ProPanel,
+  ShopPanel,
+  ProgressPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   home: { id: 'home', defaultMessage: 'Home' },
@@ -99,15 +102,15 @@ class HomePage extends PureComponent {
           },
         ]}
         layout={[
-          <UserPanel key='home-page-user-panel' />,
-          <ProgressPanel key='home-page-progress-panel' />,
-          <ProPanel isPro={isPro} key='home-page-pro-panel' />,
-          <TrendsPanel key='home-page-trends-panel' />,
-          <ShopPanel isLazy shouldLoad={lazyLoaded} key='home-page-shop-panel' />,
-          <ListsPanel isLazy shouldLoad={lazyLoaded} key='home-page-lists-panel' />,
-          <WhoToFollowPanel isLazy shouldLoad={lazyLoaded} key='home-page-wtf-panel' />,
-          <GroupsPanel isLazy shouldLoad={lazyLoaded} key='home-page-groups-panel' />,
-          <LinkFooter key='home-page-link-footer' />,
+          UserPanel,
+          ProgressPanel,
+          <WrappedBundle component={ProPanel} componentParams={{ isPro: isPro }} />,
+          TrendsPanel,
+          <WrappedBundle component={ShopPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
+          <WrappedBundle component={ListsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
+          <WrappedBundle component={WhoToFollowPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
+          <WrappedBundle component={GroupsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded, groupType: 'member' }}  />,
+          LinkFooter,
         ]}
       >
 

app/javascript/gabsocial/pages/list_page.js

@@ -7,11 +7,14 @@ import {
   // MODAL_LIST_TIMELINE_SETTINGS,
 } from '../constants'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
 import DefaultLayout from '../layouts/default_layout'
-import ListDetailsPanel from '../components/panel/list_details_panel'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import TrendsPanel from '../components/panel/trends_panel'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  ListDetailsPanel,
+  LinkFooter,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   list: { id: 'list', defaultMessage: 'List' },
@@ -77,10 +80,10 @@ class ListPage extends ImmutablePureComponent {
           // },
         ]}
         layout={[
-          <ListDetailsPanel list={list} onEdit={this.handleOnOpenListEditModal} key='list-page-list-panel' />,
-          <TrendsPanel key='list-page-trends-panel' />,
-          <WhoToFollowPanel key='list-page-wtf-panel' />,
-          <LinkFooter key='list-page-link-footer' />,
+          <WrappedBundle component={ListDetailsPanel} componentParams={{ list: list, onEdit: this.handleOnOpenListEditModal }} />,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={[title, intl.formatMessage(messages.list)]} />

app/javascript/gabsocial/pages/lists_page.js

@@ -1,10 +1,12 @@
 import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   lists: { id: 'lists', defaultMessage: 'Lists' },
@@ -45,9 +47,9 @@ class ListsPage extends PureComponent {
           },
         ]}
         layout={[
-          <TrendsPanel key='lists-page-trends-panel' />,
-          <WhoToFollowPanel key='lists-page-wtf-panel' />,
-          <LinkFooter key='lists-page-link-footer' />,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
         showBackBtn
       >

app/javascript/gabsocial/pages/modal_page.js

@@ -1,8 +1,10 @@
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import Block from '../components/block'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 export default class ModalPage extends PureComponent {
 
@@ -23,11 +25,11 @@ export default class ModalPage extends PureComponent {
       <DefaultLayout
         title={title}
         page={page}
-        layout={[
-          <WhoToFollowPanel key='modal-page-wtf-panel' />,
-          <LinkFooter key='search-page-link-footer' />,
-        ]}
         showBackBtn
+        layout={[
+          WhoToFollowPanel,
+          LinkFooter,
+        ]}
       >
         <PageTitle path={title} />
         

app/javascript/gabsocial/pages/news_page.js

@@ -1,10 +1,12 @@
 import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
-import ProgressPanel from '../components/panel/progress_panel'
-import VerifiedAccountsPanel from '../components/panel/verified_accounts_panel'
-import ShopPanel from '../components/panel/shop_panel'
-import SignupPanel from '../components/panel/sign_up_panel'
-import LinkFooter from '../components/link_footer'
+import {
+  LinkFooter,
+  ProgressPanel,
+  ShopPanel,
+  SignUpPanel,
+  VerifiedAccountsPanel,
+} from '../features/ui/util/async_components'
 
 export default class NewsPage extends PureComponent {
 
@@ -23,11 +25,11 @@ export default class NewsPage extends PureComponent {
         noComposeButton
         showBackBtn
         layout={[
-          <SignupPanel key='explore-page-signup-panel' />,
-          <ProgressPanel key='explore-page-progress-panel' />,
-          <VerifiedAccountsPanel key='explore-page-verified-panel' />,
-          <ShopPanel key='explore-page-shop-panel' />,
-          <LinkFooter key='explore-page-link-footer' />,
+          SignUpPanel,
+          ProgressPanel,
+          VerifiedAccountsPanel,
+          ShopPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />

app/javascript/gabsocial/pages/notifications_page.js

@@ -4,11 +4,13 @@ import { setFilter } from '../actions/notifications'
 import { me } from '../initial_state'
 import { NOTIFICATION_FILTERS } from '../constants'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import NotificationFilterPanel from '../components/panel/notification_filter_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  NotificationFilterPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
@@ -88,10 +90,10 @@ class NotificationsPage extends PureComponent {
         title={intl.formatMessage(messages.notifications)}
         page='notifications'
         layout={[
-          <NotificationFilterPanel key='notification-page-filter-panel' />,
-          <TrendsPanel key='notification-page-trends-panel' />,
-          <WhoToFollowPanel key='notification-page-wtf-panel' />,
-          <LinkFooter key='notification-page-link-footer' />,
+          NotificationFilterPanel,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
         tabs={tabs}
       >

app/javascript/gabsocial/pages/pro_page.js

@@ -1,9 +1,11 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import VerifiedAccountsPanel from '../components/panel/verified_accounts_panel'
-import ProgressPanel from '../components/panel/progress_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  VerifiedAccountsPanel,
+  ProgressPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   title: { 'id': 'column.pro', 'defaultMessage': 'Pro feed' },
@@ -28,9 +30,9 @@ class ProPage extends PureComponent {
         title={title}
         page='pro'
         layout={[
-          <ProgressPanel key='pro-page-progress-panel' />,
-          <VerifiedAccountsPanel key='pro-page-verified-panel' />,
-          <LinkFooter key='pro-page-link-footer' />,
+          ProgressPanel,
+          VerifiedAccountsPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />

app/javascript/gabsocial/pages/search_page.js

@@ -2,12 +2,14 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Responsive from '../features/ui/util/responsive_component'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import SearchFilterPanel from '../components/panel/search_filter_panel'
-import TrendsPanel from '../components/panel/trends_panel'
-import SignupPanel from '../components/panel/sign_up_panel'
 import Search from '../components/search'
 import Layout from '../layouts/layout'
+import {
+  LinkFooter,
+  TrendsPanel,
+  SearchFilterPanel,
+  SignUpPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   search: { id: 'search', defaultMessage: 'Search' },
@@ -65,10 +67,10 @@ class SearchPage extends PureComponent {
         tabs={tabs}
         page={`search.${qos}`}
         layout={[
-          <SignupPanel key='search-page-signup-panel' />,
-          <SearchFilterPanel key='search-page-search-panel' />,
-          <TrendsPanel key='search-page-trends-panel' />,
-          <LinkFooter key='search-page-link-footer' />,
+          SignUpPanel,
+          SearchFilterPanel,
+          TrendsPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />

app/javascript/gabsocial/pages/shortcuts_page.js

@@ -2,10 +2,12 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
 import { MODAL_EDIT_SHORTCUTS } from '../constants'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   shortcuts: { id: 'shortcuts', defaultMessage: 'Shortcuts' },
@@ -47,9 +49,9 @@ class ShortcutsPage extends PureComponent {
           },
         ]}
         layout={[
-          <TrendsPanel key='shortcuts-page-trends-panel' />,
-          <WhoToFollowPanel key='shortcuts-page-wtf-panel' />,
-          <LinkFooter key='shortcuts-page-link-footer' />,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />