Merge pull request #7085 from hotosm/fix/6941-update-badges-levels-loader

Fix/6941 update badges levels loader

Author: ramyaragupathy

frontend/src/components/badges/index.js

@@ -10,7 +10,7 @@ import { useDropzone } from 'react-dropzone';
 import messages from './messages';
 import { Button } from '../button';
 import { Management } from '../teamsAndOrgs/management';
-import { nCardPlaceholders } from '../licenses/licensesPlaceholder';
+import { nCardPlaceholders } from './nCardPlaceholders';
 import { CircleMinusIcon } from '../svgIcons';
 import { OHSOME_STATS_TOPICS, IMAGE_UPLOAD_SERVICE } from '../../config';
 import { SwitchToggle } from '../formInputs';

frontend/src/components/badges/nCardPlaceholders.js

@@ -0,0 +1,30 @@
+import { TextRow, RectShape } from 'react-placeholder/lib/placeholders';
+
+export const BudgetCardPlaceholderTemplate = () => (_n, i) =>
+  (
+    <div className="w-25-ns w-100 fl pr3 pb4" key={i}>
+      <div className="cf bg-white blue-dark b--grey-light shadow-hover flex ph2 pv2">
+        <RectShape
+          className="show-loading-animation"
+          color="#CCC"
+          style={{ height: '60px', width: '60px' }}
+        />
+        <div className="flex flex-column w-100">
+          <TextRow
+            className="show-loading-animation"
+            color="#CCC"
+            style={{ height: '30px', width: '50%', marginTop: '0px' }}
+          />
+          <TextRow
+            className="show-loading-animation"
+            color="#CCC"
+            style={{ height: '15px', width: '80%' }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+
+export const nCardPlaceholders = (N) => {
+  return [...Array(N).keys()].map(BudgetCardPlaceholderTemplate());
+};

frontend/src/components/levels/index.js

@@ -8,7 +8,7 @@ import { useState } from 'react';
 import messages from './messages';
 import { Button } from '../button';
 import { Management } from '../teamsAndOrgs/management';
-import { nCardPlaceholders } from '../licenses/licensesPlaceholder';
+import { nCardPlaceholders } from './nCardPlaceholder';
 import { SwitchToggle } from '../formInputs';
 import { CircleMinusIcon } from '../svgIcons';
 

frontend/src/components/levels/nCardPlaceholder.js

@@ -0,0 +1,25 @@
+import { TextRow, RectShape } from 'react-placeholder/lib/placeholders';
+
+export const LevelCardPlaceholderTemplate = () => (_n, i) =>
+  (
+    <div className="w-100-ns w-100 fl pr3 pb3" key={i}>
+      <div className="cf bg-white blue-dark b--grey-light shadow-hover flex ph2 pv2">
+        <RectShape
+          className="show-loading-animation"
+          color="#CCC"
+          style={{ height: '35px', width: '20px' }}
+        />
+        <div className="flex flex-column w-100 justify-center">
+          <TextRow
+            className="show-loading-animation"
+            color="#CCC"
+            style={{ height: '35px', width: '100%', marginTop: '0px' }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+
+export const nCardPlaceholders = (N) => {
+  return [...Array(N).keys()].map(LevelCardPlaceholderTemplate());
+};