Fixes bug 3612

client/modules/IDE/components/SketchList.css

@@ -0,0 +1,18 @@
+/* SketchList.css */
+.skeleton-row {
+  background-color: #e2e2e2;
+  border-radius: 4px;
+  height: 24px;
+  animation: shimmer 1.5s infinite linear;
+  background: linear-gradient(to right, #e2e2e2 0%, #f5f5f5 50%, #e2e2e2 100%);
+  background-size: 1000px 100%;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -500px 0;
+  }
+  100% {
+    background-position: 500px 0;
+  }
+}

client/modules/IDE/components/SketchList.jsx

@@ -6,6 +6,7 @@ import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { bindActionCreators } from 'redux';
+import { v4 as uuidv4 } from 'uuid';
 import * as ProjectsActions from '../actions/projects';
 import * as CollectionsActions from '../actions/collections';
 import * as ToastActions from '../actions/toast';
@@ -17,6 +18,7 @@ import AddToCollectionList from './AddToCollectionList';
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import SketchListRowBase from './SketchListRowBase';
+import './SketchList.css';
 
 const SketchList = ({
   user,
@@ -29,7 +31,6 @@ const SketchList = ({
   resetSorting,
   mobile
 }) => {
-  const [isInitialDataLoad, setIsInitialDataLoad] = useState(true);
   const [sketchToAddToCollection, setSketchToAddToCollection] = useState(null);
   const { t } = useTranslation();
 
@@ -38,12 +39,6 @@ const SketchList = ({
     resetSorting();
   }, [getProjects, username, resetSorting]);
 
-  useEffect(() => {
-    if (Array.isArray(sketches)) {
-      setIsInitialDataLoad(false);
-    }
-  }, [sketches]);
-
   const getSketchesTitle = useMemo(
     () =>
       username === user.username
@@ -52,19 +47,19 @@ const SketchList = ({
     [username, user.username, t]
   );
 
-  const isLoading = () => loading && isInitialDataLoad;
-
-  const hasSketches = () => !isLoading() && sketches.length > 0;
-
-  const renderLoader = () => isLoading() && <Loader />;
-
-  const renderEmptyTable = () => {
-    if (!isLoading() && sketches.length === 0) {
-      return (
-        <p className="sketches-table__empty">{t('SketchList.NoSketches')}</p>
-      );
-    }
-    return null;
+  const hasSketches = () => sketches.length > 0;
+
+  // Render skeleton loader rows with unique keys
+  const renderSkeletonRows = () => {
+    if (!loading) return null;
+    return Array.from({ length: 5 }).map(() => (
+      <tr key={uuidv4()}>
+        <td
+          className="skeleton-row"
+          colSpan={user.username === username ? 5 : 4}
+        />
+      </tr>
+    ));
   };
 
   const getButtonLabel = useCallback(
@@ -119,16 +114,36 @@ const SketchList = ({
     [sorting, getButtonLabel, toggleDirectionForField, t]
   );
 
+  const renderedRows = useMemo(
+    () =>
+      sketches.map((sketch) => (
+        <SketchListRowBase
+          mobile={mobile}
+          key={sketch.id}
+          sketch={sketch}
+          user={user}
+          username={username}
+          onAddToCollection={() => setSketchToAddToCollection(sketch)}
+          t={t}
+        />
+      )),
+    [sketches, mobile, user, username, t]
+  );
+
   const userIsOwner = user.username === username;
 
   return (
     <article className="sketches-table-container">
       <Helmet>
         <title>{getSketchesTitle}</title>
       </Helmet>
-      {renderLoader()}
-      {renderEmptyTable()}
-      {hasSketches() && (
+
+      {!hasSketches() && loading && <Loader />}
+      {!hasSketches() && !loading && (
+        <p className="sketches-table__empty">{t('SketchList.NoSketches')}</p>
+      )}
+
+      {(hasSketches() || loading) && (
         <table
           className="sketches-table"
           summary={t('SketchList.TableSummary')}
@@ -153,20 +168,12 @@ const SketchList = ({
             </tr>
           </thead>
           <tbody>
-            {sketches.map((sketch) => (
-              <SketchListRowBase
-                mobile={mobile}
-                key={sketch.id}
-                sketch={sketch}
-                user={user}
-                username={username}
-                onAddToCollection={() => setSketchToAddToCollection(sketch)}
-                t={t}
-              />
-            ))}
+            {loading && renderSkeletonRows()}
+            {!loading && renderedRows}
           </tbody>
         </table>
       )}
+
       {sketchToAddToCollection && (
         <Overlay
           isFixedHeight

client/modules/IDE/hooks/useP5Version.jsx

@@ -62,9 +62,14 @@ export function P5VersionProvider(props) {
         if (!match) return null;
 
         // See if this is a version we recognize
-        if (p5Versions.includes(match[1])) {
-          return { version: match[1], minified: !!match[2], scriptNode };
+        if (p5Versions.some((v) => v.version === match[1])) {
+          return {
+            version: match[1],
+            minified: !!match[2],
+            scriptNode
+          };
         }
+
         return null;
       })
       .filter((version) => version !== null);