Some improvements in web application performance

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

web/src/App.css

@@ -24,7 +24,8 @@ select:focus {
 }
 
 .noScroll-sidebar,
-.noScroll-modal {
+.noScroll-modal,
+.noScroll-loading {
   margin: 0;
   height: 100%;
   overflow: hidden;

web/src/App.tsx

@@ -1,7 +1,8 @@
 import './styles/default.scss';
 import './App.css';
 
-import { isNull, isUndefined } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 import { useEffect } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 

web/src/hooks/useBreakpointDetect.ts

@@ -1,4 +1,4 @@
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import { useEffect, useState } from 'react';
 
 import { Breakpoint } from '../types';

web/src/hooks/useOutsideClick.ts

@@ -1,4 +1,4 @@
-import { isNull } from 'lodash';
+import isNull from 'lodash/isNull';
 import { RefObject, useCallback, useEffect, useState } from 'react';
 
 export const useOutsideClick = (

web/src/layout/common/ExternalLink.tsx

@@ -1,6 +1,6 @@
 import './ExternalLink.module.css';
 
-import { isUndefined } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 
 import { SVGIconKind } from '../../types';
 import SVGIcon from './SVGIcon';

web/src/layout/common/Loading.module.css

@@ -1,116 +1,18 @@
 .wrapper {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgba(255, 255, 255, 0.5);
   z-index: 100;
 }
 
 .transparentBg {
   background-color: transparent;
 }
 
-.wave {
-  height: 50px;
-  width: 50px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
+.spinner {
+  width: 3.5rem;
+  height: 3.5rem;
 }
 
-.miniWave {
-  height: 12px;
-  width: 12px;
-}
-
-.wave:before,
-.wave:after {
-  content: '';
-  border: 2px solid var(--light-blue);
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  position: absolute;
-  left: 0px;
-  right: 0px;
-}
-
-[data-theme='dark'] .wave:before,
-[data-theme='dark'] .wave:after {
-  border-color: var(--light-blue);
-}
-
-.miniWave:before,
-.miniWave:after {
-  width: 12px;
-  height: 12px;
-  border-width: 1px;
-}
-
-.wave:before {
-  -webkit-transform: scale(1, 1);
-  -ms-transform: scale(1, 1);
-  transform: scale(1, 1);
-  opacity: 1;
-  -webkit-animation: spWaveBe 0.6s infinite linear;
-  animation: spWaveBe 0.6s infinite linear;
-}
-
-.wave:after {
-  -webkit-transform: scale(0, 0);
-  -ms-transform: scale(0, 0);
-  transform: scale(0, 0);
-  opacity: 0;
-  -webkit-animation: spWaveAf 0.6s infinite linear;
-  animation: spWaveAf 0.6s infinite linear;
-}
-
-@-webkit-keyframes spWaveAf {
-  from {
-    -webkit-transform: scale(0.5, 0.5);
-    transform: scale(0.5, 0.5);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: scale(1, 1);
-    transform: scale(1, 1);
-    opacity: 1;
-  }
-}
-@keyframes spWaveAf {
-  from {
-    -webkit-transform: scale(0.5, 0.5);
-    transform: scale(0.5, 0.5);
-    -webkit-transform: scale(0.5, 0.5);
-    transform: scale(0.5, 0.5);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: scale(1, 1);
-    transform: scale(1, 1);
-    -webkit-transform: scale(1, 1);
-    transform: scale(1, 1);
-    opacity: 1;
-  }
-}
-@-webkit-keyframes spWaveBe {
-  from {
-    -webkit-transform: scale(1, 1);
-    transform: scale(1, 1);
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: scale(1.5, 1.5);
-    transform: scale(1.5, 1.5);
-    opacity: 0;
-  }
-}
-@keyframes spWaveBe {
-  from {
-    -webkit-transform: scale(1, 1);
-    transform: scale(1, 1);
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: scale(1.5, 1.5);
-    transform: scale(1.5, 1.5);
-    opacity: 0;
-  }
+.miniSpinner {
+  width: 0.5rem;
+  height: 0.5rem;
 }

web/src/layout/common/Loading.tsx

@@ -1,5 +1,5 @@
-import classnames from 'classnames';
-import { isUndefined } from 'lodash';
+import classNames from 'classnames';
+import isUndefined from 'lodash/isUndefined';
 import React from 'react';
 
 import styles from './Loading.module.css';
@@ -16,11 +16,15 @@ export interface ILoadingProps {
 export const Loading: React.FC<ILoadingProps> = (props: ILoadingProps) => {
   const getSpinner = (): JSX.Element => {
     return (
-      <div
-        className={classnames(styles.wave, { [styles.miniWave]: props.smallSize }, props.spinnerClassName)}
-        role="status"
-      >
-        <span className="visually-hidden">Loading...</span>
+      <div className="d-flex justify-content-center">
+        <div
+          className={classNames('spinner-border text-secondary', styles.spinner, {
+            [styles.miniSpinner]: !isUndefined(props.smallSize) && props.smallSize,
+          })}
+          role="status"
+        >
+          <span className="visually-hidden">Loading...</span>
+        </div>
       </div>
     );
   };
@@ -29,16 +33,22 @@ export const Loading: React.FC<ILoadingProps> = (props: ILoadingProps) => {
     <>
       {isUndefined(props.noWrapper) || !props.noWrapper ? (
         <div
-          className={classnames(
-            'position-absolute top-0 bottom-0 start-0 end-0',
+          className={classNames(
+            'top-0 bottom-0 start-0 end-0 position-absolute',
             { 'p-5': isUndefined(props.smallSize) || !props.smallSize },
             `position-${props.position || 'absolute'}`,
             styles.wrapper,
             { [styles.transparentBg]: !isUndefined(props.transparentBg) && props.transparentBg },
             props.className
           )}
         >
-          <div className="d-flex flex-row align-items-center justify-content-center w-100 h-100">{getSpinner()}</div>
+          <div
+            className={
+              props.spinnerClassName || 'd-flex flex-row align-items-center justify-content-center w-100 h-100'
+            }
+          >
+            {getSpinner()}
+          </div>
         </div>
       ) : (
         <>{getSpinner()}</>

web/src/layout/common/Modal.module.css

@@ -1,5 +1,8 @@
 .active {
-  animation: fadeIn 0.25s 1 ease-in-out forwards;
+  animation-name: fadeIn;
+  animation-duration: 0.15s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
   z-index: 1080;
 }
 
@@ -24,7 +27,10 @@
 }
 
 .activeBackdrop {
-  animation: fadeIn50 0.15s 1 ease-in-out forwards;
+  animation-name: fadeIn50;
+  animation-duration: 0.15s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
 }
 
 @keyframes fadeIn {

web/src/layout/common/Modal.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { isUndefined } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 import { MouseEvent, useEffect, useRef, useState } from 'react';
 
 import { useBodyScroll } from '../../hooks/useBodyScroll';

web/src/layout/common/Searchbar.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { isNull, isUndefined } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 import { ChangeEvent, KeyboardEvent, useContext, useEffect, useRef, useState } from 'react';
 
 import { useOutsideClick } from '../../hooks/useOutsideClick';

web/src/layout/common/itemModal/ParticipationStats.tsx

@@ -1,4 +1,4 @@
-import { isInteger } from 'lodash';
+import isInteger from 'lodash/isInteger';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 

web/src/layout/common/itemModal/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { isUndefined } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 import moment from 'moment';
 import { useContext, useEffect, useState } from 'react';
 

web/src/layout/common/zoomModal/index.tsx

@@ -1,4 +1,5 @@
-import { isUndefined, throttle } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
+import throttle from 'lodash/throttle';
 import { useContext, useEffect, useRef, useState } from 'react';
 
 import { COLORS } from '../../../data';
@@ -14,7 +15,7 @@ import {
   ZoomContext,
   ZoomProps,
 } from '../../context/AppContext';
-import GridItem from '../../explore/gridCategory/GridItem';
+import GridItem from '../../explore/grid/GridItem';
 import FullScreenModal from '../FullScreenModal';
 import { Loading } from '../Loading';
 import styles from './ZoomModal.module.css';
@@ -127,7 +128,7 @@ const ZoomModal = () => {
           </div>
         ) : (
           <div className={`d-flex flex-column p-5 ${styles.loadingWrapper}`}>
-            <Loading />
+            <Loading transparentBg />
           </div>
         )}
       </div>

web/src/layout/explore/Content.tsx

@@ -4,14 +4,15 @@ import { ViewMode } from '../../types';
 import arePropsEqual from '../../utils/areEqualProps';
 import { CategoriesData } from '../../utils/prepareData';
 import { ViewModeContext, ViewModeProps } from '../context/AppContext';
-import CardCategory from './cardCategory';
-import GridCategory from './gridCategory';
+import CardCategory from './card';
+import GridCategory from './grid';
 
 interface Props {
   isSelected: boolean;
   containerWidth: number;
   data: CategoriesData;
   categories_overridden?: string[];
+  finishLoading: () => void;
 }
 
 // Memoized version of content to avoid unnecessary
@@ -20,18 +21,21 @@ const Content = memo(function Content(props: Props) {
 
   return (
     <>
-      <div className={selectedViewMode === ViewMode.Grid ? 'd-block' : 'd-none'}>
+      <div style={selectedViewMode === ViewMode.Grid ? { height: 'initial' } : { height: '0px', overflow: 'hidden' }}>
         <GridCategory
+          isVisible={props.isSelected && selectedViewMode === ViewMode.Grid}
           containerWidth={props.containerWidth}
           data={props.data}
           categories_overridden={props.categories_overridden}
+          finishLoading={props.finishLoading}
         />
       </div>
-      <div className={selectedViewMode === ViewMode.Card ? 'd-block' : 'd-none'}>
+      <div style={selectedViewMode === ViewMode.Card ? { height: 'initial' } : { height: '0px', overflow: 'hidden' }}>
         <CardCategory
           isVisible={props.isSelected && selectedViewMode === ViewMode.Card}
           data={props.data}
           categories_overridden={props.categories_overridden}
+          finishLoading={props.finishLoading}
         />
       </div>
     </>

web/src/layout/explore/Landscape.module.css → web/src/layout/explore/Explore.module.css

@@ -33,3 +33,11 @@
 .btnGroupLegend {
   font-size: 0.75rem;
 }
+
+.container {
+  min-height: 400px;
+}
+
+.loadingContent {
+  min-height: calc(100vh - 92px - 36px);
+}

web/src/layout/explore/cardCategory/ButtonToTopScroll.tsx → web/src/layout/explore/card/ButtonToTopScroll.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { isNull, throttle } from 'lodash';
+import isNull from 'lodash/isNull';
+import throttle from 'lodash/throttle';
 import { MouseEvent, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 

web/src/layout/explore/cardCategory/Card.tsx → web/src/layout/explore/card/Card.tsx

@@ -1,4 +1,4 @@
-import { isUndefined } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 
 import { Item, Repository, SVGIconKind } from '../../../types';
 import cleanEmojis from '../../../utils/cleanEmojis';

web/src/layout/explore/card/CardCategory.module.css

@@ -0,0 +1,3 @@
+.loading {
+  min-height: calc(100vh - 92px - 36px);
+}

web/src/layout/explore/cardCategory/CardTitle.tsx → web/src/layout/explore/card/CardTitle.tsx

@@ -1,4 +1,4 @@
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import { useEffect, useRef, useState } from 'react';
 
 import styles from './CardTitle.module.css';