lazy importing icons

Rahuletto · Jul 24, 2023 · d3c2eaf · d3c2eaf
1 parent 1f4b3ab
commit d3c2eaf
Show file tree

Hide file tree

Showing 45 changed files with 611 additions and 4,936 deletions.
diff --git a/components/AddFile.tsx b/components/AddFile.tsx
@@ -1,5 +1,6 @@
 // Icons
-import { FaPlus } from 'react-icons-ng/fa';
+import dynamic from 'next/dynamic';
+const FaPlus = dynamic(() => import('react-icons-ng/fa').then(mod => mod.FaPlus), { ssr: false })
 
 const AddFile = ({ files, limit = 2 }) => {
   function showDialog() {

diff --git a/components/CodeBoard.tsx b/components/CodeBoard.tsx
@@ -2,6 +2,7 @@
 import dynamic from 'next/dynamic';
 import React, { Suspense, useEffect, memo } from 'react';
 
+// Lazy import
 const CodeMirror = dynamic(() => import('@uiw/react-codemirror'), {
   loading: () => <BoardLoader />,
   ssr: false,

diff --git a/components/CodeMenu.tsx b/components/CodeMenu.tsx
@@ -1,4 +1,5 @@
 
+import dynamic from 'next/dynamic';
 import {
     Menu,
     Item,
@@ -7,11 +8,19 @@ import {
 } from 'react-contexify';
 
 import 'react-contexify/dist/ReactContexify.css';
-import { BiCommand, BiSearch, BiSolidCopy } from 'react-icons-ng/bi';
-import { CoExpand } from 'react-icons-ng/co';
-import { FlFillIcFluentWindow24Filled, FlFillIcFluentCut24Filled } from 'react-icons-ng/fl';
-import { LuClipboardPaste } from 'react-icons-ng/lu';
-import { SiPrettier } from 'react-icons-ng/si';
+
+const BiCommand = dynamic(() => import('react-icons-ng/bi').then(mod => mod.BiCommand ), { ssr: false })
+const BiSearch = dynamic(() => import('react-icons-ng/bi').then(mod => mod.BiSearch ), { ssr: false })
+const BiSolidCopy = dynamic(() => import('react-icons-ng/bi').then(mod => mod.BiSolidCopy ), { ssr: false })
+
+const CoExpand = dynamic(() => import('react-icons-ng/co').then(mod => mod.CoExpand ), { ssr: false })
+
+const FlFillIcFluentWindow24Filled = dynamic(() => import('react-icons-ng/fl').then(mod => mod.FlFillIcFluentWindow24Filled ), { ssr: false })
+const FlFillIcFluentCut24Filled = dynamic(() => import('react-icons-ng/fl').then(mod => mod.FlFillIcFluentCut24Filled ), { ssr: false })
+
+const LuClipboardPaste = dynamic(() => import('react-icons-ng/lu').then(mod => mod.LuClipboardPaste ), { ssr: false })
+
+const SiPrettier = dynamic(() => import('react-icons-ng/si').then(mod => mod.SiPrettier ), { ssr: false })
 
 const CodeMenu = ({ readOnly }) => {
 

diff --git a/components/Command.tsx b/components/Command.tsx
@@ -7,8 +7,8 @@ import { Md2RobotExcited } from "react-icons-ng/md2";
 import { PiStarFourFill } from "react-icons-ng/pi";
 import { SiPrettier } from "react-icons-ng/si";
 import { HiEye, HiFlag, HiHome, HiLifebuoy, HiMoon, HiPlus, HiSun } from 'react-icons-ng/hi'
-import { IconType } from "react-icons-ng";
 
+import { IconType } from "react-icons-ng";
 
 const Command = ({ router }) => {
     const [cmd, setCmd] = useState(false);
@@ -257,7 +257,7 @@ const Command = ({ router }) => {
                         style={{
                             textAlign: 'center',
                             margin: '25px',
-                            fontFamily: 'var(--mono-font)',
+                            fontFamily: "var(--mono-font)",
                             color: 'var(--special-color)',
                         }}>
                         No Results

diff --git a/components/CreateModal.tsx b/components/CreateModal.tsx
@@ -5,11 +5,13 @@ import { ChangeEvent, FormEvent } from 'react';
 import styles from '../styles/Index.module.css';
 
 // Icons
-import { FaBackward, FaCloudUploadAlt } from 'react-icons-ng/fa';
+const FaBackward = dynamic(() => import('react-icons-ng/fa').then(mod => mod.FaBackward), { ssr: false })
+const FaCloudUploadAlt = dynamic(() => import('react-icons-ng/fa').then(mod => mod.FaCloudUploadAlt), { ssr: false })
 
 // Our Imports
 import { extensions } from '../utils/extensions';
 import { BoardFile } from '../utils/types/board';
+import dynamic from 'next/dynamic';
 
 type CreateModalProps = {
   files: BoardFile[];

diff --git a/components/DropZone.tsx b/components/DropZone.tsx
@@ -1,8 +1,10 @@
 // Styles
+import dynamic from 'next/dynamic';
 import styles from '../styles/Index.module.css';
 
 // Icons
-import { FaCloudUploadAlt, FaWindowClose } from 'react-icons-ng/fa';
+const FaCloudUploadAlt = dynamic(() => import('react-icons-ng/fa').then(mod => mod.FaCloudUploadAlt), { ssr: false })
+const FaWindowClose = dynamic(() => import('react-icons-ng/fa').then(mod => mod.FaWindowClose), { ssr: false })
 
 // Our Imports
 import { BoardFile } from '../utils/types/board';

diff --git a/components/Feature.tsx b/components/Feature.tsx
@@ -1,8 +1,10 @@
 // Styles
+import dynamic from 'next/dynamic';
 import styles from '../styles/Index.module.css';
 import feature from './styles/Feature.module.css';
 
-import { McCheckCircleFill, McForbidCircleLine } from 'react-icons-ng/mc';
+const McCheckCircleFill = dynamic(() => import('react-icons-ng/mc').then(mod => mod.McCheckCircleFill), { ssr: false })
+const McForbidCircleLine = dynamic(() => import('react-icons-ng/mc').then(mod => mod.McForbidCircleLine), { ssr: false })
 
 const Features = ({ session }) => {
   return (
@@ -116,7 +118,7 @@ const Features = ({ session }) => {
             <h4>
               <span
                 style={{
-                  fontFamily: 'var(--mono-font)',
+                  fontFamily: "var(--mono-font)",
                   color: 'var(--purple-dark)',
                   fontSize: '22px',
                 }}>

diff --git a/components/FileSelect.tsx b/components/FileSelect.tsx
@@ -1,5 +1,7 @@
 // Icons
-import { FaCaretDown } from 'react-icons-ng/fa';
+import dynamic from 'next/dynamic';
+const FaCaretDown = dynamic(() => import('react-icons-ng/fa').then(mod => mod.FaCaretDown), { ssr: false })
+
 
 // Our Imports
 import { BoardFile } from '../utils/types/board';

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,4 +1,5 @@
 // Styles
+import dynamic from 'next/dynamic';
 import styles from './styles/Header.module.css';
 
 // NextJS
@@ -8,12 +9,15 @@ import Link from 'next/link';
 import ThemeSwitch from './ThemeSwitch';
 
 // Icons
-import { FaPlus, FaUserAlt } from 'react-icons-ng/fa';
+
+const FaPlus = dynamic(() => import('react-icons-ng/fa').then(mod => mod.FaPlus), { ssr: false })
+const FaUserAlt = dynamic(() => import('react-icons-ng/fa').then(mod => mod.FaUserAlt), { ssr: false })
 
 import { useRouter } from 'next/router';
 import { useSession } from '@supabase/auth-helpers-react';
 import { memo } from 'react';
 
+
 type HeaderProps = {
   theme?: string;
   setTheme?: Function;

diff --git a/components/InfoButton.tsx b/components/InfoButton.tsx
@@ -1,6 +1,8 @@
 
 // Icons
-import { GoGear } from 'react-icons-ng/go';
+import dynamic from 'next/dynamic';
+
+const GoGear = dynamic(() => import('react-icons-ng/go').then(mod => mod.GoGear), { ssr: false })
 
 interface MetaTagsProps {
   metadata?: boolean;

diff --git a/components/PrettierButton.tsx b/components/PrettierButton.tsx
@@ -1,5 +1,7 @@
 // Icons
-import { SiPrettier } from 'react-icons-ng/si';
+import dynamic from 'next/dynamic';
+const SiPrettier = dynamic(() => import('react-icons-ng/si').then(mod => mod.SiPrettier), { ssr: false })
+
 
 // Styles
 import styles from '../styles/Index.module.css';

diff --git a/components/Save.tsx b/components/Save.tsx
@@ -2,7 +2,8 @@
 import styles from '../styles/Index.module.css';
 
 // Icons
-import { BiSolidSave } from 'react-icons-ng/bi';
+import dynamic from 'next/dynamic';
+const BiSolidSave = dynamic(() => import('react-icons-ng/bi').then(mod => mod.BiSolidSave), { ssr: false })
 
 const Save = () => {
   return (

diff --git a/components/Warning.tsx b/components/Warning.tsx
@@ -2,8 +2,10 @@
 import generalStyles from '../styles/General.module.css'
 
 // Icons
-import { IoCloseCircleSharp } from 'react-icons-ng/io5';
-import { TiWarning } from 'react-icons-ng/ti';
+import dynamic from 'next/dynamic';
+const IoCloseCircleSharp = dynamic(() => import('react-icons-ng/io5').then(mod => mod.IoCloseCircleSharp), { ssr: false })
+const TiWarning = dynamic(() => import('react-icons-ng/ti').then(mod => mod.TiWarning), { ssr: false })
+
 
 const Warning: React.FC<{}> = () => {
   return (

diff --git a/components/styles/Feature.module.css b/components/styles/Feature.module.css
@@ -39,7 +39,7 @@
 
 .card h2 {
   color: var(--special-color);
-  font-family: 'var(--mono-font)';
+  font-family: var(--mono-font);
 }
 
 .card h3 {

diff --git a/components/styles/Header.module.css b/components/styles/Header.module.css
@@ -7,7 +7,7 @@
 .newProject {
   font-size: 18px;
   background: var(--background-dark);
-  font-family: 'var(--mono-font)';
+  font-family: var(--mono-font);
   color: var(--special-color);
   padding: 6px 24px;
   border-radius: 50px;
@@ -19,7 +19,7 @@
 
 .title {
   margin: 0px;
-  font-family: 'var(--mono-font)';
+  font-family: var(--mono-font);
   font-size: 36px;
   color: var(--special-color);
 }
@@ -51,7 +51,7 @@
   background: var(--purple);
   border-radius: 10px;
   border-right: 4px solid var(--purple-dark);
-  font-family: 'var(--mono-font)';
+  font-family: var(--mono-font);
   height: 34px;
   display: flex;
   align-items: center;

diff --git a/components/styles/Loader.module.css b/components/styles/Loader.module.css
@@ -109,7 +109,7 @@
 }
 
 .loadTitle {
-  font-family: 'var(--mono-font)';
+  font-family: var(--mono-font);
   color: var(--special-color);
   opacity: 0.8;
   font-weight: 600;

diff --git a/components/utils/DarkTheme.ts b/components/utils/DarkTheme.ts
@@ -9,7 +9,7 @@ const DarkTheme = atomoneInit({
         selection: '#646464',
         selectionMatch: '#646464',
         caret: '#C6C6C6',
-        fontFamily: 'var(--mono-font)',
+        fontFamily: "var(--mono-font)",
     },
     styles: [
         { tag: t.content, color: '#7D8799' },