Implement basic placeholder skeleton when loading

src/App.css

@@ -63,7 +63,16 @@ body {
   background-color: #0056b3;
 }
 
+.PlaceholderItem > button,
 .ParentDirectoryItem > button {
 	background-color: #4D4F5D;
 }
 
+.PlaceholderItem > a {
+  height: 1em;
+}
+
+.PlaceholderItem > button {
+  height: calc(16px + 10px * 2);
+  width: 6em;
+}

src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './App.css';
 
 import Gallery from './Gallery/index';

src/Gallery/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import '../App.css';
+import placeholderPng from './placeholder.png';
 import { useState, useEffect } from 'react';
 
 function Gallery() {
@@ -13,7 +14,7 @@ function Gallery() {
   }, [category]);
 
   const updateCategory = (category: string) => {
-    setData([]);
+    setData(getPlaceholderData);
     setCategory(category);
   };
 
@@ -33,6 +34,8 @@ interface galleryItemInfo {
   is_dir: boolean;
   url: string;
   thumbnail_url: string;
+
+  isPlaceholder: boolean;
 }
 
 function Contents(
@@ -61,6 +64,7 @@ function Contents(
         thumbnail_url:
           item.thumbnail_url === null ? item.url : item.thumbnail_url,
         onClick: () => {},
+        isPlaceholder: item.isPlaceholder,
       };
 
       if (item.is_dir) {
@@ -87,11 +91,13 @@ interface galleryItem {
   url: string;
   thumbnail_url: string;
   onClick: () => void;
+  isPlaceholder: boolean;
 }
 
-function ImageItem({ thumbnail_url, url }: galleryItem) {
+function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) {
+  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
   return (
-    <div className="GalleryItem">
+    <div className={`GalleryItem ${placeholderClass}`}>
       <a href={url} target="_blank">
         {getFileName(url)}
       </a>
@@ -113,16 +119,15 @@ function VideoItem({ url }: galleryItem) {
   );
 }
 
-function DirectoryItem({ url, onClick }: galleryItem) {
+function DirectoryItem({ url, onClick, isPlaceholder }: galleryItem) {
   let buttonText = getFileName(url);
   const isBackButton = buttonText === '..';
-  buttonText = isBackButton ? 'Back' : `Category: ${buttonText}`;
+  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
+  buttonText = isBackButton ? 'Back' : `${buttonText}`;
   const backButtonClass = isBackButton ? 'ParentDirectoryItem' : '';
   return (
-    <div className={`DirectoryItem ${backButtonClass}`}>
-      <button className="DirectoryItem" onClick={onClick}>
-        {buttonText}
-      </button>
+    <div className={`DirectoryItem ${backButtonClass} ${placeholderClass}`}>
+      <button onClick={onClick}>{buttonText}</button>
     </div>
   );
 }
@@ -131,14 +136,40 @@ function getFileName(string: string): string {
   return string.split('/').at(-1) as unknown as string;
 }
 
+function getPlaceholderData(): galleryItemInfo[] {
+  const placeholderDir = (): galleryItemInfo => {
+    return {
+      is_dir: true,
+      url: '',
+      thumbnail_url: '',
+      isPlaceholder: true,
+    };
+  };
+  const placeholderImg = (): galleryItemInfo => {
+    return {
+      is_dir: false,
+      url: '',
+      thumbnail_url: `${placeholderPng}`,
+      isPlaceholder: true,
+    };
+  };
+
+  return [
+    placeholderDir(),
+    placeholderDir(),
+    placeholderImg(),
+    placeholderImg(),
+    placeholderImg(),
+  ];
+}
 async function post(
   category: string,
   setDataCallback: (data: galleryItemInfo[]) => void
 ) {
   try {
     const response = await fetch(
-      'http://localhost/photo-viewer-backend/php/get.php',
-      //'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
+      //'http://localhost/photo-viewer-backend/php/get.php',
+      'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
       {
         method: 'POST',
         headers: {
@@ -152,6 +183,14 @@ async function post(
     setDataCallback(await response.json());
   } catch (error) {
     console.error('Error fetching data: ', error);
+    setDataCallback([
+      {
+        is_dir: false,
+        url: 'error_fetching',
+        thumbnail_url: '',
+        isPlaceholder: false,
+      },
+    ]);
   }
 }