60afbaf873
These are chunks that will be requested immediately after ui.js when opening the homepage, so consolidate them into 1 chunk to reduce network overhead. More work can/should be done to reduce the secondary chunk.
43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import React from 'react';
|
|
import { useIsMobile } from 'effects/use-screensize';
|
|
|
|
const Button = React.lazy(() => import('component/button' /* webpackChunkName: "button" */));
|
|
const Icon = React.lazy(() => import('component/common/icon' /* webpackChunkName: "icon" */));
|
|
const WunderbarSuggestions = React.lazy(() => import('component/wunderbarSuggestions' /* webpackChunkName: "secondary" */));
|
|
|
|
type Props = {
|
|
doOpenMobileSearch: (any) => void,
|
|
channelsOnly?: boolean,
|
|
noTopSuggestion?: boolean,
|
|
noBottomLinks?: boolean,
|
|
customSelectAction?: (string) => void,
|
|
};
|
|
|
|
export default function WunderBar(props: Props) {
|
|
const { doOpenMobileSearch, channelsOnly, noTopSuggestion, noBottomLinks, customSelectAction } = props;
|
|
const isMobile = useIsMobile();
|
|
|
|
return isMobile ? (
|
|
<React.Suspense fallback={null}>
|
|
<Button icon={ICONS.SEARCH} className="wunderbar__mobile-search" onClick={() => doOpenMobileSearch({ ...props })} />
|
|
</React.Suspense>
|
|
) : (
|
|
<React.Suspense
|
|
fallback={
|
|
<div className="wunderbar__wrapper wunderbar wunderbar__input" aria-disabled>
|
|
<Icon icon={ICONS.SEARCH} aria-disabled />
|
|
</div>
|
|
}
|
|
>
|
|
<WunderbarSuggestions
|
|
channelsOnly={channelsOnly}
|
|
noTopSuggestion={noTopSuggestion}
|
|
noBottomLinks={noBottomLinks}
|
|
customSelectAction={customSelectAction}
|
|
/>
|
|
</React.Suspense>
|
|
);
|
|
}
|