Update table component's skeleton look

Not only does it now resemble the other skeleton components, but it now also actually works
webkom · Feb 10, 2024 · 59df0ce · 59df0ce
1 parent 1602d93
commit 59df0ce
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 45 deletions.
diff --git a/app/components/Table/Table.css b/app/components/Table/Table.css
@@ -18,6 +18,22 @@
 
 .wrapper tr:nth-child(even) {
   background-color: rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 3%);
+
+  & .loader {
+    animation: skeleton-loading 1s linear infinite alternate;
+  }
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: var(--color-gray-1);
+  }
+  50% {
+    background-color: var(--color-gray-2);
+  }
+  100% {
+    background-color: var(--color-gray-3);
+  }
 }
 
 .checkbox {
@@ -35,7 +51,7 @@
 }
 
 .loader {
-  border-bottom: none;
+  height: 40.797px;
 }
 
 .overlay {

diff --git a/app/components/Table/index.tsx b/app/components/Table/index.tsx
@@ -1,4 +1,3 @@
-import { LoadingIndicator } from '@webkom/lego-bricks';
 import cx from 'classnames';
 import { debounce, isEmpty, get } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
@@ -176,12 +175,14 @@ const Table: React.FC<TableProps> = ({
     }
   };
 
+  const visibleColumns = columns.filter(isVisible);
+
   return (
     <div className={cx(styles.wrapper, className)}>
       <table>
         <thead>
           <tr>
-            {columns.filter(isVisible).map((column, index) => (
+            {visibleColumns.map((column, index) => (
               <HeadCell
                 key={column.dataIndex + column.title}
                 column={column}
@@ -217,13 +218,16 @@ const Table: React.FC<TableProps> = ({
               ))}
             </tr>
           ))}
-          {loading && (
-            <tr>
-              <td className={styles.loader} colSpan={columns.length}>
-                <LoadingIndicator loading={loading} />
-              </td>
-            </tr>
-          )}
+          {loading &&
+            Array.from({ length: 10 }).map((_, index) => (
+              <tr key={index}>
+                {Array.from({ length: visibleColumns.length }).map(
+                  (_, index) => (
+                    <td key={index} className={styles.loader} />
+                  )
+                )}
+              </tr>
+            ))}
         </InfiniteScroll>
       </table>
     </div>

diff --git a/app/routes/admin/groups/components/GroupMembersList.tsx b/app/routes/admin/groups/components/GroupMembersList.tsx
@@ -171,17 +171,15 @@ const GroupMembersList = ({
   ].filter(Boolean);
 
   return (
-    <>
-      <Table
-        onChange={setQuery}
-        columns={columns}
-        hasMore={hasMore}
-        loading={fetching}
-        data={memberships}
-        filters={query}
-        className={styles.list}
-      />
-    </>
+    <Table
+      onChange={setQuery}
+      columns={columns}
+      hasMore={hasMore}
+      loading={fetching}
+      data={memberships}
+      filters={query}
+      className={styles.list}
+    />
   );
 };
 

diff --git a/app/routes/events/components/EventAdministrate/Abacard.tsx b/app/routes/events/components/EventAdministrate/Abacard.tsx
@@ -50,7 +50,7 @@ const Abacard = () => {
     <div>
       <Validator handleSelect={handleSelect} validateAbakusGroup={false} />
       <div className={styles.counter}>
-        {registerCount}/{event.registrationCount} har møtt opp
+        {registerCount}/{event.registrationCount || '?'} har møtt opp
       </div>
     </div>
   );

diff --git a/app/routes/events/components/EventAdministrate/Allergies.tsx b/app/routes/events/components/EventAdministrate/Allergies.tsx
@@ -1,5 +1,6 @@
 import { Button, Flex, Icon, LoadingIndicator } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
+import { isEmpty } from 'lodash';
 import { Link, useParams } from 'react-router-dom';
 import { fetchAllergies } from 'app/actions/EventActions';
 import Table from 'app/components/Table';
@@ -16,7 +17,7 @@ export const canSeeAllergies = (
   currentUser?: CurrentUser,
   event?: AdministrateEvent
 ) => {
-  if (!currentUser || !event) {
+  if (!currentUser || !event || isEmpty(event)) {
     return false;
   }
   return (

diff --git a/app/routes/events/components/EventAdministrate/Attendees.tsx b/app/routes/events/components/EventAdministrate/Attendees.tsx
@@ -57,10 +57,6 @@ const Attendees = () => {
       unreg.paymentStatus === 'succeeded' || unreg.paymentStatus === 'manual'
   ).length;
 
-  if (loading || !event) {
-    return <LoadingIndicator loading={loading} />;
-  }
-
   // Not showing the presence column until 1 day before start or if someone has been given set to presence
   const showPresence =
     moment().isAfter(moment(event.startTime).subtract(1, 'day')) ||
@@ -129,14 +125,14 @@ const Attendees = () => {
       </Flex>
       <Flex column>
         <div>
-          <strong>Påmeldte:</strong>
+          <strong>Påmeldte</strong>
           <div className={styles.attendeeStatistics}>
-            {`${registerCount}/${event.registrationCount} ${
+            {`${registerCount}/${event.registrationCount || '?'} ${
               eventHasEnded ? 'møtte opp' : 'har møtt opp'
             }`}
           </div>
           <div className={styles.attendeeStatistics}>
-            {`${adminRegisterCount}/${event.registrationCount} ${
+            {`${adminRegisterCount}/${event.registrationCount || '?'} ${
               eventHasEnded ? 'ble' : 'er'
             } adminpåmeldt`}
           </div>
@@ -155,7 +151,7 @@ const Attendees = () => {
               : ''}
           </div>
         </div>
-        {registered.length === 0 ? (
+        {registered.length === 0 && !loading ? (
           <span className="secondaryFontColor">Ingen påmeldte</span>
         ) : (
           <RegisteredTable
@@ -172,9 +168,9 @@ const Attendees = () => {
             marginTop: '10px',
           }}
         >
-          Avmeldte:
+          Avmeldte
         </strong>
-        {unregistered.length === 0 ? (
+        {unregistered.length === 0 && !loading ? (
           <span className="secondaryFontColor">Ingen avmeldte</span>
         ) : (
           <UnregisteredTable

diff --git a/app/routes/events/components/EventAdministrate/index.tsx b/app/routes/events/components/EventAdministrate/index.tsx
@@ -33,14 +33,6 @@ const EventAdministrateIndex = () => {
 
   const base = `/events/${eventId}/administrate`;
 
-  if (!event) {
-    return (
-      <Content>
-        <LoadingIndicator loading={fetching} />
-      </Content>
-    );
-  }
-
   return (
     <Content>
       <NavigationTab
@@ -49,6 +41,7 @@ const EventAdministrateIndex = () => {
           label: 'Tilbake',
           path: '/events/' + event.slug,
         }}
+        skeleton={fetching}
       >
         <NavigationLink to={`${base}/attendees`}>Påmeldinger</NavigationLink>
         {event && canSeeAllergies(currentUser, event) && (

diff --git a/app/routes/users/components/UserSettingsOAuth2.tsx b/app/routes/users/components/UserSettingsOAuth2.tsx
@@ -196,8 +196,8 @@ const UserSettingsOAuth2 = () => {
             <Link to="/users/me/settings/oauth2/new">Ny applikasjon</Link>
           </Button>
         )}
-        {applications.length === 0 ? (
-          <span>Du har ingen applikasjoner</span>
+        {applications.length === 0 && !fetchingApplications ? (
+          <span className="secondaryFontColor">Du har ingen applikasjoner</span>
         ) : (
           <Table
             columns={applicationColumns}
@@ -209,8 +209,10 @@ const UserSettingsOAuth2 = () => {
       </Flex>
 
       <h3>Aksepterte applikasjoner</h3>
-      {grants.length === 0 ? (
-        <span>Du har ikke logget på en app enda.</span>
+      {grants.length === 0 && !fetchingGrants ? (
+        <span className="secondaryFontColor">
+          Du har ikke logget på en app enda
+        </span>
       ) : (
         <Table
           columns={acceptedApplicationcolumns}