vite fixes and performance optimizations

jekrch · Jun 25, 2024 · 4dbf3f8 · 4dbf3f8
1 parent f621978
commit 4dbf3f8
Show file tree

Hide file tree

Showing 16 changed files with 131 additions and 86 deletions.
diff --git a/dist/assets/IntroColumn-C1CURhup.js b/dist/assets/IntroColumn-C1CURhup.js
diff --git a/dist/assets/index-CdX9zOuz.css b/dist/assets/index-CdX9zOuz.css
diff --git a/dist/assets/index-Di97Rn61.css b/dist/assets/index-Di97Rn61.css
diff --git a/dist/assets/index-CDYCwPbm.js → dist/assets/index-fm0Aj39Z.js b/dist/assets/index-CDYCwPbm.js → dist/assets/index-fm0Aj39Z.js
diff --git a/dist/index.html b/dist/index.html
@@ -23,8 +23,8 @@
 
     <link rel="manifest" href="/manifest.json" />
     <title>Eurovision Ranker</title>
-    <script type="module" crossorigin src="/assets/index-CDYCwPbm.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CdX9zOuz.css">
+    <script type="module" crossorigin src="/assets/index-fm0Aj39Z.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Di97Rn61.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -50,6 +50,16 @@ const App: React.FC = () => {
   const [isOverlayExit, setIsOverlayExit] = useState(false);
   const [runTour, setRunTour] = useState(false);
 
+  const loadAuroralCSS = () => {
+    return import('./auroral.css');
+  };
+
+  useEffect(() => {
+    if (theme.includes('ab')) {
+      loadAuroralCSS();
+    }
+  }, [theme]);
+
   /**
    * Determines whether any rankings are set in the url
    * @returns 

diff --git a/src/components/modals/MainModal.tsx b/src/components/modals/MainModal.tsx
@@ -86,7 +86,7 @@ const MainModal: React.FC<MainModalProps> = (props: MainModalProps) => {
                         target="_blank"
                         rel="noopener noreferrer"
                         href="https://github.com/jekrch/eurovision-ranker/releases"
-                    >v3.6</a>
+                    >v3.6.1</a>
                 </span>
                 <span className="text-right">
                     {`Copyright (c) 2023${new Date().getFullYear()?.toString() !== '2023' ? '-' + new Date().getFullYear() : ''} `}

diff --git a/src/components/ranking/IntroColumn.tsx b/src/components/ranking/IntroColumn.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHouseUser, faHeart, faList, faGlasses } from '@fortawesome/free-solid-svg-icons';
 
-type IntroColumnProps = {
+export type IntroColumnProps = {
     openModal: (tabName: string) => void;
     openConfigModal: (tabName: string) => void;
     setRunTour:  (runTour: boolean) => void;
 };
 
 const IntroColumn: React.FC<IntroColumnProps> = ({ openModal, openConfigModal, setRunTour }) => {
     return (
-        <div className="flex justify-left items-center ">
+        <div className="flex justify-left items-center">
             <div className="text-gray-400 font-normal tracking-tight font-sans text-italic text-left ml-7 m-4 text-xs whitespace-normal max-w-[10em] mt-3">
                 <ol className="list-disc mb-7">
                     <li className="mb-3">Drag countries into this column to rank</li>

diff --git a/src/components/ranking/IntroColumnWrapper.tsx b/src/components/ranking/IntroColumnWrapper.tsx
@@ -0,0 +1,22 @@
+import React, { Suspense, useEffect, useState } from 'react';
+import { IntroColumnProps } from './IntroColumn';
+
+const LazyIntroColumn = React.lazy(() => import('./IntroColumn'));
+
+export const IntroColumnWrapper: React.FC<IntroColumnProps> = (props) => {
+  const [introColumnLoaded, setIntroColumnLoaded] = useState(false);
+
+  useEffect(() => {
+    setIntroColumnLoaded(true);
+  }, []);
+
+  return (
+    <Suspense fallback={<div className="w-[10em]"/>}>
+      {introColumnLoaded ? (
+        <LazyIntroColumn {...props} />
+      ) : (
+        <div>Loading...</div>
+      )}
+    </Suspense>
+  );
+};
diff --git a/src/components/ranking/RankedCountriesList.tsx b/src/components/ranking/RankedCountriesList.tsx
@@ -1,12 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { StrictModeDroppable } from './StrictModeDroppable';
 import classNames from 'classnames';
 import { CountryContestant } from '../../data/CountryContestant';
 import { Card } from './Card';
 import { DetailsCard } from './DetailsCard';
 import RankedItemsHeader from './RankedItemsHeader';
-import IntroColumn from './IntroColumn';
 import { FaChevronRight } from 'react-icons/fa';
 import IconButton from '../IconButton';
 import { useDispatch, useSelector } from 'react-redux';
@@ -17,6 +16,7 @@ import { supportedYears } from '../../data/Contestants';
 import { generateYoutubePlaylistUrl } from '../../utilities/YoutubeUtil';
 import { removeCountryFromUrlCategoryRankings } from '../../utilities/CategoryUtil';
 import { updateUrlFromRankedItems } from '../../utilities/UrlUtil';
+import { IntroColumnWrapper } from './IntroColumnWrapper';
 
 interface RankedCountriesListProps {
     openSongModal: (countryContestant: CountryContestant) => void;
@@ -52,7 +52,7 @@ const RankedCountriesList: React.FC<RankedCountriesListProps> = ({
     const unrankedItems = useSelector((state: AppState) => state.unrankedItems);
     const categories = useSelector((state: AppState) => state.categories);
     const activeCategory = useSelector((state: AppState) => state.activeCategory);
-
+      
     /**
    * used to synchronize the horizontal scrollbar on detail cards across all ranked items
    */
@@ -146,7 +146,7 @@ const RankedCountriesList: React.FC<RankedCountriesListProps> = ({
                                 )}
                             >
                                 {rankedItems.length === 0 && showUnranked && (
-                                    <IntroColumn
+                                    <IntroColumnWrapper
                                         openModal={openModal}
                                         openConfigModal={openConfigModal}
                                         setRunTour={setRunTour}

diff --git a/src/components/ranking/UnrankedCountriesList.tsx b/src/components/ranking/UnrankedCountriesList.tsx
@@ -17,7 +17,7 @@ const UnrankedCountriesList: React.FC = ({
     const unrankedItems = useSelector((state: AppState) => state.unrankedItems);
 
     return (
-        <div className="max-w-[50vw] overflow-y-auto flex-grow mr-1">
+        <div className="min-w-[10em] max-w-[50vw] overflow-y-auto flex-grow mr-1">
             <StrictModeDroppable droppableId="unrankedItems" key={`strict-md`}>
                 {(provided) => (
                     <ul

diff --git a/src/index.css b/src/index.css
@@ -244,10 +244,14 @@ code {
 }
 
 .pulse-on-load:hover {
+  transform-origin: center center;
+  will-change: transform;
   animation: pulse 1s ease-in-out infinite;
 }
 
 .pulse-on-load {
+  transform-origin: center center;
+  will-change: transform;
   animation: pulse 1s ease-in-out 2;
 }
 

diff --git a/src/utilities/UrlUtil.test.ts b/src/utilities/UrlUtil.test.ts
@@ -13,6 +13,8 @@ vi.mock('./ContestantRepository', () => ({
     fetchCountryContestantsByYear: vi.fn()
 }));
 
+
+
 function mockWindowLocationSearch(search: string) {
     Object.defineProperty(window, 'location', {
         value: {
@@ -26,8 +28,8 @@ function mockWindowLocationSearch(search: string) {
 // reset window.location to its original state after each test
 afterEach(() => {
 
-    const dom = new JSDOM();
-    global.navigator = dom.window.navigator;
+    // const dom = new JSDOM();
+    // global.navigator = dom.window.navigator;
 
     vi.restoreAllMocks();
 });

diff --git a/src/utilities/export/ExportUtil.test.ts b/src/utilities/export/ExportUtil.test.ts
@@ -66,7 +66,7 @@ describe('convertToJSON', () => {
 describe('copyDataToClipboard', () => {
     beforeEach(() => {
         const dom = new JSDOM();
-        global.navigator = dom.window.navigator;
+        //global.navigator = dom.window.navigator;
       });
 
     it('copies text to clipboard', async () => {

diff --git a/vite.config.mjs b/vite.config.mjs
@@ -1,6 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
+import postcss from 'postcss';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
 
 export default defineConfig({
     // depending on your application, base can also be "/"
@@ -17,5 +20,14 @@ export default defineConfig({
         environment: 'jsdom',
         setupFiles: './src/setupTests.ts',
     },
-
+    css: {
+        postcss: {
+          plugins: [
+            postcss([
+              tailwindcss(),
+              autoprefixer(),
+            ]),
+          ],
+        },
+      },
 })