LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-05 05:15:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Statically load icons

Browse source 
They were timing out for some people and breaking the page. Eventually we will only include the icons the app uses, instead of lazy loading _all_ the icons, which doesn't help very much
This commit is contained in:
Sean Yesmunt 2019-05-01 15:26:47 -04:00
parent 92e0c9691f
commit 4e2005b560
1 changed files with 4 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/ui/component/common/icon.jsx
View file

@ -1,30 +1,11 @@
// @flow // @flow
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as FEATHER_ICONS from 'react-feather';
import React from 'react'; import React from 'react';
import Tooltip from 'component/common/tooltip'; import Tooltip from 'component/common/tooltip';
import classnames from 'classnames'; import classnames from 'classnames';
import { customIcons } from './icon-custom'; import { customIcons } from './icon-custom';
let featherIcons = false;
const featherIconsPromise = import(/* webpackChunkName: "react-feather" */
/* webpackPrefetch: true */
'react-feather').then(result => (featherIcons = result));
const LazyFeatherIcons = new Proxy(
{},
{
get(target, name) {
if (featherIcons) {
return featherIcons[name];
}
return React.lazy(() =>
featherIconsPromise.then(featherIcons => ({ default: featherIcons[name] }))
);
},
}
);
// It would be nice to standardize this somehow // It would be nice to standardize this somehow
// These are copied from `scss/vars`, can they both come from the same source? // These are copied from `scss/vars`, can they both come from the same source?
const RED_COLOR = '#e2495e'; const RED_COLOR = '#e2495e';
@ -66,7 +47,7 @@ class IconComponent extends React.PureComponent<Props> {
render() { render() {
const { icon, tooltip, iconColor, size, className } = this.props; const { icon, tooltip, iconColor, size, className } = this.props;
const Icon = customIcons[this.props.icon] || LazyFeatherIcons[this.props.icon]; const Icon = customIcons[this.props.icon] || FEATHER_ICONS[this.props.icon];
if (!Icon) { if (!Icon) {
return null; return null;
@ -83,20 +64,8 @@ class IconComponent extends React.PureComponent<Props> {
if (tooltip) { if (tooltip) {
tooltipText = this.getTooltip(icon); tooltipText = this.getTooltip(icon);
} }
const inner = (
<React.Suspense const inner = <Icon size={iconSize} className={classnames('icon', className)} color={color} />;
fallback={
<svg
height={iconSize}
width={iconSize}
className={classnames('icon', className)}
color={color}
/>
}
>
<Icon size={iconSize} className={classnames('icon', className)} color={color} />
</React.Suspense>
);
return tooltipText ? ( return tooltipText ? (
<Tooltip icon body={tooltipText} direction={tooltip}> <Tooltip icon body={tooltipText} direction={tooltip}>