Migrate icons into separate file in order to lazy load them

Jean-Tinland · Aug 5, 2024 · a1eb609 · a1eb609
1 parent 8571abf
commit a1eb609
Show file tree

Hide file tree

Showing 241 changed files with 3,347 additions and 1,716 deletions.
diff --git a/lib/app-icons.js b/lib/app-icons.js
@@ -1,4 +1,4 @@
-import * as Icons from "./components/icons.jsx";
+import * as Icons from "./components/icons/icons.jsx";
 
 export const apps = {
   "1Password 7": Icons.OnePassword,

diff --git a/lib/components/data/battery.jsx b/lib/components/data/battery.jsx
@@ -1,7 +1,8 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
+import { SuspenseIcon } from "../icons/icon.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";
@@ -94,7 +95,11 @@ export const Widget = React.memo(() => {
   const Icon = () => (
     <div className="battery__icon">
       <div className="battery__icon-inner">
-        {charging && <Icons.Charging className="battery__charging-icon" />}
+        {charging && (
+          <SuspenseIcon>
+            <Icons.Charging className="battery__charging-icon" />
+          </SuspenseIcon>
+        )}
         <div
           className="battery__icon-filler"
           style={{ transform: transformValue }}
@@ -111,7 +116,9 @@ export const Widget = React.memo(() => {
       {...onClickProp}
     >
       {caffeinate.length > 0 && (
-        <Icons.Coffee className="battery__caffeinate-icon" />
+        <SuspenseIcon>
+          <Icons.Coffee className="battery__caffeinate-icon" />
+        </SuspenseIcon>
       )}
       {percentage}%
     </DataWidget.Widget>

diff --git a/lib/components/data/browser-track.jsx b/lib/components/data/browser-track.jsx
@@ -1,7 +1,8 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
+import { SuspenseIcon } from "../icons/icon.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";
@@ -86,8 +87,10 @@ export const Widget = React.memo(() => {
     const BrowserIcon = getIcon(browser);
     return (
       <div className="browser-track__icons">
-        <BrowserIcon />
-        <Icons.Playing />
+        <SuspenseIcon>
+          <BrowserIcon />
+          <Icons.Playing />
+        </SuspenseIcon>
       </div>
     );
   };

diff --git a/lib/components/data/cpu.jsx b/lib/components/data/cpu.jsx
@@ -2,7 +2,7 @@ import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import Graph from "./graph.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";
@@ -47,10 +47,10 @@ export const Widget = React.memo(() => {
       const usage = await Uebersicht.run(
         `top -l 1 | grep -E "^CPU" | grep -Eo '[^[:space:]]+%' | head -1 | sed s/%//`
       );
-      const formatedUsage = { usage: parseInt(usage, 10).toFixed(0) };
-      setState(formatedUsage);
+      const formattedUsage = { usage: parseInt(usage, 10).toFixed(0) };
+      setState(formattedUsage);
       if (displayAsGraph) {
-        Utils.addToGraphHistory(formatedUsage, setGraph, GRAPH_LENGTH);
+        Utils.addToGraphHistory(formattedUsage, setGraph, GRAPH_LENGTH);
       }
       setLoading(false);
     } catch (e) {

diff --git a/lib/components/data/crypto.jsx b/lib/components/data/crypto.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";

diff --git a/lib/components/data/data-widget.jsx b/lib/components/data/data-widget.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as Specter from "./specter.jsx";
 import * as Utils from "../../utils";
-
+import { SuspenseIcon } from "../icons/icon.jsx";
 export { dataWidgetStyles as styles } from "../../styles/components/data/data-widget";
 
 const { React } = Uebersicht;
@@ -53,7 +53,11 @@ export function Widget({
       onMouseLeave={!disableSlider ? onMouseLeave : undefined}
       style={style}
     >
-      {Icon && <Icon />}
+      {Icon && (
+        <SuspenseIcon>
+          <Icon />
+        </SuspenseIcon>
+      )}
       {showSpecter && <Specter.Widget />}
       <Inner disableSlider={disableSlider}>{children}</Inner>
     </Tag>

diff --git a/lib/components/data/date-display.jsx b/lib/components/data/date-display.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import * as Utils from "../../utils";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";

diff --git a/lib/components/data/graph.jsx b/lib/components/data/graph.jsx
@@ -1,4 +1,8 @@
+import * as Uebersicht from "uebersicht";
 import * as Utils from "../../utils.js";
+import { SuspenseIcon } from "../icons/icon.jsx";
+
+const { React } = Uebersicht;
 
 export { graphStyles as styles } from "../../styles/components/data/graph";
 
@@ -46,14 +50,15 @@ export default function Graph({
       <div className="graph__data">
         {captionKeys.map((key) => {
           const { value, icon: Icon, color } = caption[key];
-
           return (
             <div key={key} className="graph__data-item">
               {Icon && (
-                <Icon
-                  className="graph__data-item-icon"
-                  style={{ fill: color }}
-                />
+                <SuspenseIcon>
+                  <Icon
+                    className="graph__data-item-icon"
+                    style={{ fill: color }}
+                  />
+                </SuspenseIcon>
               )}
               <span
                 className="graph__data-item-value"

diff --git a/lib/components/data/keyboard.jsx b/lib/components/data/keyboard.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";

diff --git a/lib/components/data/mic.jsx b/lib/components/data/mic.jsx
@@ -1,7 +1,8 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
+import { SuspenseIcon } from "../icons/icon.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import * as Utils from "../../utils";
@@ -87,7 +88,9 @@ export const Widget = React.memo(() => {
   return (
     <DataWidget.Widget classes={classes} disableSlider>
       <div className="mic__display">
-        <Icon />
+        <SuspenseIcon>
+          <Icon />
+        </SuspenseIcon>
         <span className="mic__value">{formattedVolume}</span>
       </div>
       <div className="mic__slider-container">

diff --git a/lib/components/data/mpd.jsx b/lib/components/data/mpd.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";

diff --git a/lib/components/data/music.jsx b/lib/components/data/music.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";

diff --git a/lib/components/data/netstats.jsx b/lib/components/data/netstats.jsx
@@ -5,7 +5,7 @@ import Graph from "./graph.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh.js";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import * as Utils from "../../utils.js";
 
 export { netstatsStyles as styles } from "../../styles/components/data/netstats";
@@ -89,8 +89,8 @@ export const Widget = React.memo(() => {
     return null;
   }
 
-  const formatedDownload = formatBytes(download);
-  const formatedUpload = formatBytes(upload);
+  const formattedDownload = formatBytes(download);
+  const formattedUpload = formatBytes(upload);
 
   if (displayAsGraph) {
     return (
@@ -99,12 +99,12 @@ export const Widget = React.memo(() => {
           className="netstats__graph"
           caption={{
             download: {
-              value: formatedDownload,
+              value: formattedDownload,
               icon: Icons.Download,
               color: "var(--magenta)",
             },
             upload: {
-              value: formatedUpload,
+              value: formattedUpload,
               icon: Icons.Upload,
               color: "var(--blue)",
             },
@@ -123,7 +123,7 @@ export const Widget = React.memo(() => {
           <Icons.Download className="netstats__icon netstats__icon--download" />
           <span
             className="netstats__value"
-            dangerouslySetInnerHTML={{ __html: formatedDownload }}
+            dangerouslySetInnerHTML={{ __html: formattedDownload }}
           />
         </div>
       </DataWidget.Widget>
@@ -132,7 +132,7 @@ export const Widget = React.memo(() => {
           <Icons.Upload className="netstats__icon netstats__icon--upload" />
           <span
             className="netstats__value"
-            dangerouslySetInnerHTML={{ __html: formatedUpload }}
+            dangerouslySetInnerHTML={{ __html: formattedUpload }}
           />
         </div>
       </DataWidget.Widget>

diff --git a/lib/components/data/sound.jsx b/lib/components/data/sound.jsx
@@ -1,7 +1,8 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
+import { SuspenseIcon } from "../icons/icon.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";
@@ -97,7 +98,9 @@ export const Widget = React.memo(() => {
   return (
     <DataWidget.Widget classes={classes} disableSlider>
       <div className="sound__display">
-        <Icon />
+        <SuspenseIcon>
+          <Icon />
+        </SuspenseIcon>
         <span className="sound__value">{formattedVolume}</span>
       </div>
       <div className="sound__slider-container">

diff --git a/lib/components/data/spotify.jsx b/lib/components/data/spotify.jsx
@@ -4,7 +4,7 @@ import * as DataWidgetLoader from "./data-widget-loader.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import * as Utils from "../../utils";
 
 export { spotifyStyles as styles } from "../../styles/components/data/spotify";

diff --git a/lib/components/data/stock.jsx b/lib/components/data/stock.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";

diff --git a/lib/components/data/time.jsx b/lib/components/data/time.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";

diff --git a/lib/components/data/user-widgets.jsx b/lib/components/data/user-widgets.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";

diff --git a/lib/components/data/viscosity-vpn.jsx b/lib/components/data/viscosity-vpn.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";

diff --git a/lib/components/data/weather.jsx b/lib/components/data/weather.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import * as Utils from "../../utils";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";

diff --git a/lib/components/data/wifi.jsx b/lib/components/data/wifi.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";

diff --git a/lib/components/data/zoom.jsx b/lib/components/data/zoom.jsx
@@ -1,7 +1,7 @@
 import * as Uebersicht from "uebersicht";
 import * as DataWidget from "./data-widget.jsx";
 import * as DataWidgetLoader from "./data-widget-loader.jsx";
-import * as Icons from "../icons.jsx";
+import * as Icons from "../icons/icons.jsx";
 import useWidgetRefresh from "../../hooks/use-widget-refresh";
 import useServerSocket from "../../hooks/use-server-socket";
 import { useSimpleBarContext } from "../simple-bar-context.jsx";