diff --git a/frontend/src/components/interests/index.js b/frontend/src/components/interests/index.js
index 636cdeccc8..ac6d5d3a5c 100644
--- a/frontend/src/components/interests/index.js
+++ b/frontend/src/components/interests/index.js
@@ -2,11 +2,13 @@ import React from 'react';
 import { Link } from '@reach/router';
 import { Form, Field } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
+import ReactPlaceholder from 'react-placeholder';
 
 import messages from '../teamsAndOrgs/messages';
 import { Management } from '../teamsAndOrgs/management';
 import { HashtagIcon } from '../svgIcons';
 import { Button } from '../button';
+import { nCardPlaceholders } from '../teamsAndOrgs/campaignsPlaceholder';
 
 export const InterestCard = ({ interest }) => {
   return (
@@ -25,7 +27,7 @@ export const InterestCard = ({ interest }) => {
   );
 };
 
-export const InterestsManagement = ({ interests, userDetails }) => {
+export const InterestsManagement = ({ interests, _userDetails, isInterestsFetched }) => {
   return (
     <Management
       title={
@@ -37,13 +39,20 @@ export const InterestsManagement = ({ interests, userDetails }) => {
       showAddButton={true}
       managementView
     >
-      {interests.length ? (
-        interests.map((i, n) => <InterestCard interest={i} />)
-      ) : (
-        <div>
-          <FormattedMessage {...messages.noCategories} />
-        </div>
-      )}
+      <ReactPlaceholder
+        showLoadingAnimation={true}
+        customPlaceholder={nCardPlaceholders(4)}
+        delay={10}
+        ready={isInterestsFetched}
+      >
+        {interests?.length ? (
+          interests.map((i, n) => <InterestCard key={n} interest={i} />)
+        ) : (
+          <div>
+            <FormattedMessage {...messages.noCategories} />
+          </div>
+        )}
+      </ReactPlaceholder>
     </Management>
   );
 };
diff --git a/frontend/src/components/interests/tests/index.test.js b/frontend/src/components/interests/tests/index.test.js
new file mode 100644
index 0000000000..6074e2c5b2
--- /dev/null
+++ b/frontend/src/components/interests/tests/index.test.js
@@ -0,0 +1,63 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProviders } from '../../../utils/testWithIntl';
+import { InterestsManagement } from '../index';
+
+const dummyInterests = [
+  {
+    id: 1,
+    name: 'Interest 1',
+  },
+  {
+    id: 2,
+    name: 'Interest 2',
+  },
+];
+
+describe('InterestsManagement component', () => {
+  it('renders loading placeholder when API is being fetched', () => {
+    const { container, getByRole } = render(
+      <IntlProviders>
+        <InterestsManagement isInterestsFetched={false} />
+      </IntlProviders>,
+    );
+    expect(
+      screen.getByRole('heading', {
+        name: /manage categories/i,
+      }),
+    ).toBeInTheDocument();
+    expect(container.getElementsByClassName('show-loading-animation')).toHaveLength(4);
+    expect(
+      getByRole('button', {
+        name: /new/i,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('does not render loading placeholder after API is fetched', () => {
+    const { container } = render(
+      <IntlProviders>
+        <InterestsManagement isInterestsFetched={true} />
+      </IntlProviders>,
+    );
+    expect(container.getElementsByClassName('show-loading-animation')).toHaveLength(0);
+  });
+
+  it('renders interests list card after API is fetched', async () => {
+    const { container, getByText } = render(
+      <IntlProviders>
+        <InterestsManagement interests={dummyInterests} isInterestsFetched={true} />
+      </IntlProviders>,
+    );
+    expect(
+      screen.getByRole('heading', {
+        name: /manage categories/i,
+      }),
+    ).toBeInTheDocument();
+    await waitFor(() => {
+      expect(getByText(/Interest 1/i));
+    });
+    expect(getByText(/Interest 2/i)).toBeInTheDocument();
+    expect(container.querySelectorAll('svg').length).toBe(3);
+  });
+});
diff --git a/frontend/src/components/licenses/index.js b/frontend/src/components/licenses/index.js
index 9df751d22b..62dafaa8c5 100644
--- a/frontend/src/components/licenses/index.js
+++ b/frontend/src/components/licenses/index.js
@@ -2,11 +2,13 @@ import React from 'react';
 import { Link } from '@reach/router';
 import { Form, Field } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
+import ReactPlaceholder from 'react-placeholder';
 
 import messages from '../teamsAndOrgs/messages';
 import { Management } from '../teamsAndOrgs/management';
 import { CopyrightIcon } from '../svgIcons';
 import { Button } from '../button';
+import { nCardPlaceholders } from './licensesPlaceholder';
 
 export const LicenseCard = ({ license }) => {
   return (
@@ -25,7 +27,7 @@ export const LicenseCard = ({ license }) => {
   );
 };
 
-export const LicensesManagement = ({ licenses, userDetails }) => {
+export const LicensesManagement = ({ licenses, userDetails, isLicensesFetched }) => {
   return (
     <Management
       title={
@@ -37,13 +39,20 @@ export const LicensesManagement = ({ licenses, userDetails }) => {
       showAddButton={true}
       managementView
     >
-      {licenses.length ? (
-        licenses.map((i, n) => <LicenseCard key={n} license={i} />)
-      ) : (
-        <div className="pv3">
-          <FormattedMessage {...messages.noLicenses} />
-        </div>
-      )}
+      <ReactPlaceholder
+        showLoadingAnimation={true}
+        customPlaceholder={nCardPlaceholders(4)}
+        delay={10}
+        ready={isLicensesFetched}
+      >
+        {licenses?.length ? (
+          licenses.map((i, n) => <LicenseCard key={n} license={i} />)
+        ) : (
+          <div className="pv3">
+            <FormattedMessage {...messages.noLicenses} />
+          </div>
+        )}
+      </ReactPlaceholder>
     </Management>
   );
 };
diff --git a/frontend/src/components/licenses/licensesPlaceholder.js b/frontend/src/components/licenses/licensesPlaceholder.js
new file mode 100644
index 0000000000..2d53f92def
--- /dev/null
+++ b/frontend/src/components/licenses/licensesPlaceholder.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { TextRow } from 'react-placeholder/lib/placeholders';
+import { CopyrightIcon } from '../svgIcons';
+
+export const licenseCardPlaceholderTemplate = () => (_n, i) =>
+  (
+    <div className="w-50-ns w-100 fl pr3" key={i}>
+      <div className="cf bg-white blue-dark br1 mv2 pv4 ph3 ba br1 b--grey-light shadow-hover">
+        <div className="dib v-mid pr3">
+          <div className="z-1 fl br-100 tc h2 w2 bg-blue-light white">
+            <span className="relative w-50 dib">
+              <CopyrightIcon style={{ paddingTop: '0.475rem' }} />
+            </span>
+          </div>
+        </div>
+        <TextRow
+          className="show-loading-animation f3 mv0 dib v-mid"
+          color="#CCC"
+          style={{ width: '55%', marginTop: 0 }}
+        />
+      </div>
+    </div>
+  );
+
+export const nCardPlaceholders = (N) => {
+  return [...Array(N).keys()].map(licenseCardPlaceholderTemplate());
+};
diff --git a/frontend/src/components/licenses/tests/licenses.test.js b/frontend/src/components/licenses/tests/licenses.test.js
index 810306584c..b4f9b96282 100644
--- a/frontend/src/components/licenses/tests/licenses.test.js
+++ b/frontend/src/components/licenses/tests/licenses.test.js
@@ -40,7 +40,7 @@ describe('Licenses Management', () => {
   it('renders all licenses and button to add a new license', () => {
     const { container } = render(
       <IntlProviders>
-        <LicensesManagement licenses={licenses} />
+        <LicensesManagement licenses={licenses} isLicensesFetched={true} />
       </IntlProviders>,
     );
     expect(container.querySelector('h3').innerHTML).toBe('Manage Licenses');
@@ -53,6 +53,18 @@ describe('Licenses Management', () => {
     const license2 = screen.getByText(/NextView/);
     expect(license2.closest('a').href).toContain('/2');
   });
+
+  it('renders placeholder and not licenses when API is being fetched', () => {
+    const { container } = render(
+      <IntlProviders>
+        <LicensesManagement licenses={licenses} isLicensesFetched={false} />
+      </IntlProviders>,
+    );
+    expect(screen.queryByText(/HOT Licence/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/NextView/)).not.toBeInTheDocument();
+    expect(container.querySelectorAll('svg').length).toBe(5); // 4 plus the new icon svg
+    expect(container.querySelector('.show-loading-animation')).toBeInTheDocument();
+  });
 });
 
 describe('LicenseForm', () => {
diff --git a/frontend/src/components/teamsAndOrgs/campaigns.js b/frontend/src/components/teamsAndOrgs/campaigns.js
index 8ce11bb756..7649f76508 100644
--- a/frontend/src/components/teamsAndOrgs/campaigns.js
+++ b/frontend/src/components/teamsAndOrgs/campaigns.js
@@ -2,13 +2,15 @@ import React from 'react';
 import { Link } from '@reach/router';
 import { FormattedMessage } from 'react-intl';
 import { Form, Field } from 'react-final-form';
+import ReactPlaceholder from 'react-placeholder';
 
+import { nCardPlaceholders } from './campaignsPlaceholder';
 import messages from './messages';
 import { Management } from './management';
 import { Button } from '../button';
 import { HashtagIcon } from '../svgIcons';
 
-export function CampaignsManagement({ campaigns, userDetails }: Object) {
+export function CampaignsManagement({ campaigns, userDetails, isCampaignsFetched }: Object) {
   return (
     <Management
       title={
@@ -20,13 +22,20 @@ export function CampaignsManagement({ campaigns, userDetails }: Object) {
       showAddButton={userDetails.role === 'ADMIN'}
       managementView
     >
-      {campaigns.length ? (
-        campaigns.map((campaign, n) => <CampaignCard campaign={campaign} key={n} />)
-      ) : (
-        <div>
-          <FormattedMessage {...messages.noCampaigns} />
-        </div>
-      )}
+      <ReactPlaceholder
+        showLoadingAnimation={true}
+        customPlaceholder={nCardPlaceholders(4)}
+        delay={10}
+        ready={isCampaignsFetched}
+      >
+        {campaigns?.length ? (
+          campaigns.map((campaign, n) => <CampaignCard campaign={campaign} key={n} />)
+        ) : (
+          <div>
+            <FormattedMessage {...messages.noCampaigns} />
+          </div>
+        )}
+      </ReactPlaceholder>
     </Management>
   );
 }
diff --git a/frontend/src/components/teamsAndOrgs/campaignsPlaceholder.js b/frontend/src/components/teamsAndOrgs/campaignsPlaceholder.js
new file mode 100644
index 0000000000..17902f5790
--- /dev/null
+++ b/frontend/src/components/teamsAndOrgs/campaignsPlaceholder.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { TextRow } from 'react-placeholder/lib/placeholders';
+import { HashtagIcon } from '../svgIcons';
+
+export const campaignCardPlaceholderTemplate = () => (_n, i) =>
+  (
+    <div className="w-50-ns w-100 fl pr3" key={i}>
+      <div className="cf bg-white blue-dark br1 mv2 pv4 ph3 ba br1 b--grey-light shadow-hover">
+        <div className="dib v-mid pr3">
+          <div className="z-1 fl br-100 tc h2 w2 bg-blue-light white">
+            <span className="relative w-50 dib">
+              <HashtagIcon style={{ paddingTop: '0.4175rem' }} />
+            </span>
+          </div>
+        </div>
+        <TextRow
+          className="show-loading-animation f3 mv0 dib v-mid"
+          color="#CCC"
+          style={{ width: '55%', marginTop: 0 }}
+        />
+      </div>
+    </div>
+  );
+
+export const nCardPlaceholders = (N) => {
+  return [...Array(N).keys()].map(campaignCardPlaceholderTemplate());
+};
diff --git a/frontend/src/components/teamsAndOrgs/organisations.js b/frontend/src/components/teamsAndOrgs/organisations.js
index 15e641f28d..10b782941e 100644
--- a/frontend/src/components/teamsAndOrgs/organisations.js
+++ b/frontend/src/components/teamsAndOrgs/organisations.js
@@ -15,6 +15,7 @@ import { Management } from './management';
 import { InternalLinkIcon, ClipboardIcon } from '../svgIcons';
 import { Button } from '../button';
 import { UserAvatarList } from '../user/avatar';
+import { nCardPlaceholders } from './organisationsPlaceholder';
 
 export function OrgsManagement({
   organisations,
@@ -22,6 +23,7 @@ export function OrgsManagement({
   isAdmin,
   userOrgsOnly,
   setUserOrgsOnly,
+  isOrganisationsFetched,
 }: Object) {
   return (
     <Management
@@ -38,19 +40,26 @@ export function OrgsManagement({
       setUserOnly={setUserOrgsOnly}
       isAdmin={isAdmin}
     >
-      {isOrgManager ? (
-        organisations.length ? (
-          organisations.map((org, n) => <OrganisationCard details={org} key={n} />)
+      <ReactPlaceholder
+        showLoadingAnimation={true}
+        customPlaceholder={nCardPlaceholders(4)}
+        delay={10}
+        ready={isOrganisationsFetched}
+      >
+        {isOrgManager ? (
+          organisations?.length ? (
+            organisations.map((org, n) => <OrganisationCard details={org} key={n} />)
+          ) : (
+            <div className="pb5">
+              <FormattedMessage {...messages.noOrganisationsFound} />
+            </div>
+          )
         ) : (
-          <div className="pb5">
-            <FormattedMessage {...messages.noOrganisationsFound} />
+          <div>
+            <FormattedMessage {...messages.notAllowed} />
           </div>
-        )
-      ) : (
-        <div>
-          <FormattedMessage {...messages.notAllowed} />
-        </div>
-      )}
+        )}
+      </ReactPlaceholder>
     </Management>
   );
 }
diff --git a/frontend/src/components/teamsAndOrgs/organisationsPlaceholder.js b/frontend/src/components/teamsAndOrgs/organisationsPlaceholder.js
new file mode 100644
index 0000000000..696f0cee5d
--- /dev/null
+++ b/frontend/src/components/teamsAndOrgs/organisationsPlaceholder.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { TextRow, RoundShape, RectShape } from 'react-placeholder/lib/placeholders';
+
+export const organisationCardPlaceholderTemplate = () => (_n, i) =>
+  (
+    <div className="w-50-l w-100 fl pr3" key={i}>
+      <div className="bg-white blue-dark mv2 pb4 dib w-100 ba br1 b--grey-light shadow-hover">
+        <div className="w-25 h4 fl pa3">
+          <RectShape
+            className="show-loading-animation"
+            style={{ width: '100%', height: 100 }}
+            color="#DDD"
+          />
+        </div>
+        <div className="w-75 fl pl3">
+          <TextRow className="show-loading-animation mb4" color="#CCC" style={{ width: '50%' }} />
+          <TextRow className="show-loading-animation mb2" color="#CCC" style={{ width: '50%' }} />
+          <div className="dib">
+            {[...Array(2)].map((_, i) => (
+              <RoundShape
+                key={i}
+                className="show-loading-animation dib mt1"
+                style={{ width: 25, height: 25 }}
+                color="#DDD"
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+export const nCardPlaceholders = (N) => {
+  return [...Array(N).keys()].map(organisationCardPlaceholderTemplate());
+};
diff --git a/frontend/src/components/teamsAndOrgs/projects.js b/frontend/src/components/teamsAndOrgs/projects.js
index faae71b81e..c249501410 100644
--- a/frontend/src/components/teamsAndOrgs/projects.js
+++ b/frontend/src/components/teamsAndOrgs/projects.js
@@ -6,6 +6,7 @@ import ReactPlaceholder from 'react-placeholder';
 import messages from './messages';
 import { ProjectCard } from '../projectCard/projectCard';
 import { AddButton, ViewAllLink } from './management';
+import { nCardPlaceholders } from '../projectCard/nCardPlaceholder';
 
 export function Projects({
   projects,
@@ -29,12 +30,10 @@ export function Projects({
         <ViewAllLink link={viewAllEndpoint} />
         <div className="cf pt4">
           <ReactPlaceholder
+            customPlaceholder={nCardPlaceholders(4, 'w-third-l')}
             showLoadingAnimation={true}
-            type="rect"
-            color="#f0efef"
-            style={{ width: 250, height: 300 }}
             delay={10}
-            ready={projects && projects.results}
+            ready={projects?.results}
           >
             {projects &&
               projects.results &&
diff --git a/frontend/src/components/teamsAndOrgs/teams.js b/frontend/src/components/teamsAndOrgs/teams.js
index b91ec7c0a5..82f05ba5f2 100644
--- a/frontend/src/components/teamsAndOrgs/teams.js
+++ b/frontend/src/components/teamsAndOrgs/teams.js
@@ -11,6 +11,7 @@ import { UserAvatar, UserAvatarList } from '../user/avatar';
 import { AddButton, ViewAllLink, Management, VisibilityBox, InviteOnlyBox } from './management';
 import { SwitchToggle, RadioField, OrganisationSelectInput } from '../formInputs';
 import { Button, EditButton } from '../button';
+import { nCardPlaceholders } from './teamsPlaceholder';
 
 export function TeamsManagement({
   teams,
@@ -18,6 +19,7 @@ export function TeamsManagement({
   managementView,
   userTeamsOnly,
   setUserTeamsOnly,
+  isTeamsFetched,
 }: Object) {
   const isOrgManager = useSelector(
     (state) => state.auth.get('organisations') && state.auth.get('organisations').length > 0,
@@ -42,13 +44,20 @@ export function TeamsManagement({
       setUserOnly={setUserTeamsOnly}
       userOnlyLabel={<FormattedMessage {...messages.myTeams} />}
     >
-      {teams.length ? (
-        teams.map((team, n) => <TeamCard team={team} key={n} managementView={managementView} />)
-      ) : (
-        <div className="pb3 pt2">
-          <FormattedMessage {...messages.noTeams} />
-        </div>
-      )}
+      <ReactPlaceholder
+        showLoadingAnimation={true}
+        customPlaceholder={nCardPlaceholders(4)}
+        delay={10}
+        ready={isTeamsFetched}
+      >
+        {teams?.length ? (
+          teams.map((team, n) => <TeamCard team={team} key={n} managementView={managementView} />)
+        ) : (
+          <div className="pb3 pt2">
+            <FormattedMessage {...messages.noTeams} />
+          </div>
+        )}
+      </ReactPlaceholder>
     </Management>
   );
 }
@@ -67,14 +76,7 @@ export function Teams({ teams, viewAllQuery, showAddButton = false, isReady, bor
         )}
         {viewAllQuery && <ViewAllLink link={`/manage/teams/${viewAllQuery ? viewAllQuery : ''}`} />}
         <div className="cf pt4">
-          <ReactPlaceholder
-            showLoadingAnimation={true}
-            type="rect"
-            color="#f0efef"
-            style={{ width: 250, height: 300 }}
-            delay={10}
-            ready={isReady}
-          >
+          <ReactPlaceholder customPlaceholder={nCardPlaceholders(4)} delay={10} ready={isReady}>
             {teams && teams.slice(0, 6).map((team, n) => <TeamCard team={team} key={n} />)}
             {teams && teams.length === 0 && (
               <span className="blue-grey">
diff --git a/frontend/src/components/teamsAndOrgs/teamsPlaceholder.js b/frontend/src/components/teamsAndOrgs/teamsPlaceholder.js
new file mode 100644
index 0000000000..2f829e02be
--- /dev/null
+++ b/frontend/src/components/teamsAndOrgs/teamsPlaceholder.js
@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react';
+
+import { TextRow, TextBlock, RoundShape, RectShape } from 'react-placeholder/lib/placeholders';
+
+export const teamCardPlaceholderTemplate = () => (_n, i) =>
+  (
+    <div className={`fl 'w-third-l' base-font w-50-m w-100 mb3 pr3 blue-dark mw5`} key={i}>
+      <div className="pv3 ph3 ba br1 b--grey-light shadow-hover bg-white">
+        <TextRow className="show-loading-animation mb3" color="#CCC" />
+        <RectShape
+          className="show-loading-animation"
+          style={{ width: 80, height: 50 }}
+          color="#DDD"
+        />
+        {[...Array(2)].map((_, i) => (
+          <Fragment key={i}>
+            <TextRow className="show-loading-animation" color="#CCC" style={{ width: '45%' }} />
+            {[...Array(2)].map((_, i) => (
+              <RoundShape
+                key={i}
+                className="show-loading-animation dib mt1"
+                style={{ width: 25, height: 25 }}
+                color="#DDD"
+              />
+            ))}
+          </Fragment>
+        ))}
+        <TextBlock rows={2} className="show-loading-animation mt2" color="#CCC" />
+      </div>
+    </div>
+  );
+
+export const nCardPlaceholders = (N) => {
+  return [...Array(N).keys()].map(teamCardPlaceholderTemplate());
+};
diff --git a/frontend/src/components/teamsAndOrgs/tests/campaigns.test.js b/frontend/src/components/teamsAndOrgs/tests/campaigns.test.js
new file mode 100644
index 0000000000..cd32300faa
--- /dev/null
+++ b/frontend/src/components/teamsAndOrgs/tests/campaigns.test.js
@@ -0,0 +1,67 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProviders } from '../../../utils/testWithIntl';
+import { CampaignsManagement } from '../campaigns';
+
+const dummyCampaigns = [
+  {
+    id: 1,
+    name: 'Campaign 1',
+  },
+  {
+    id: 2,
+    name: 'Campaign 2',
+  },
+];
+
+describe('CampaignsManagement component', () => {
+  it('renders loading placeholder when API is being fetched', () => {
+    const { container, getByRole } = render(
+      <IntlProviders>
+        <CampaignsManagement userDetails={{ role: 'ADMIN' }} isCampaignsFetched={false} />
+      </IntlProviders>,
+    );
+    expect(
+      screen.getByRole('heading', {
+        name: /manage campaigns/i,
+      }),
+    ).toBeInTheDocument();
+    expect(container.getElementsByClassName('show-loading-animation')).toHaveLength(4);
+    expect(
+      getByRole('button', {
+        name: /new/i,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('does not render loading placeholder after API is fetched', () => {
+    const { container } = render(
+      <IntlProviders>
+        <CampaignsManagement userDetails={{ role: 'ADMIN' }} isCampaignsFetched={true} />
+      </IntlProviders>,
+    );
+    expect(container.getElementsByClassName('show-loading-animation')).toHaveLength(0);
+  });
+
+  it('renders campaigns list card after API is fetched', async () => {
+    const { container, getByText } = render(
+      <IntlProviders>
+        <CampaignsManagement
+          campaigns={dummyCampaigns}
+          userDetails={{ role: 'ADMIN' }}
+          isCampaignsFetched={true}
+        />
+      </IntlProviders>,
+    );
+    expect(
+      screen.getByRole('heading', {
+        name: /manage campaigns/i,
+      }),
+    ).toBeInTheDocument();
+    await waitFor(() => {
+      expect(getByText(/Campaign 1/i));
+    });
+    expect(getByText(/Campaign 2/i)).toBeInTheDocument();
+    expect(container.querySelectorAll('svg').length).toBe(3);
+  });
+});
diff --git a/frontend/src/components/teamsAndOrgs/tests/organisations.test.js b/frontend/src/components/teamsAndOrgs/tests/organisations.test.js
index 2e8e92a141..a78bcd7607 100644
--- a/frontend/src/components/teamsAndOrgs/tests/organisations.test.js
+++ b/frontend/src/components/teamsAndOrgs/tests/organisations.test.js
@@ -61,7 +61,12 @@ describe('OrgsManagement with', () => {
   };
   it('isOrgManager = false and isAdmin = false should NOT list organisations', () => {
     const element = createComponentWithIntl(
-      <OrgsManagement organisations={orgData.organisations} isOrgManager={false} isAdmin={false} />,
+      <OrgsManagement
+        organisations={orgData.organisations}
+        isOrgManager={false}
+        isAdmin={false}
+        isOrganisationsFetched={true}
+      />,
     );
     const testInstance = element.root;
     expect(testInstance.findAllByType(FormattedMessage).map((i) => i.props.id)).toContain(
@@ -77,7 +82,12 @@ describe('OrgsManagement with', () => {
 
   it('isOrgManager and isAdmin SHOULD list organisations and have a link to /new ', () => {
     const element = createComponentWithIntl(
-      <OrgsManagement organisations={orgData.organisations} isOrgManager={true} isAdmin={true} />,
+      <OrgsManagement
+        organisations={orgData.organisations}
+        isOrgManager={true}
+        isAdmin={true}
+        isOrganisationsFetched={true}
+      />,
     );
     const testInstance = element.root;
     expect(testInstance.findByType(OrganisationCard).props.details).toStrictEqual(
@@ -99,7 +109,12 @@ describe('OrgsManagement with', () => {
 
   it('OrgsManagement with isOrgManager = true and isAdmin = false SHOULD list organisations, but should NOT have an AddButton', () => {
     const element = createComponentWithIntl(
-      <OrgsManagement organisations={orgData.organisations} isOrgManager={true} isAdmin={false} />,
+      <OrgsManagement
+        organisations={orgData.organisations}
+        isOrgManager={true}
+        isAdmin={false}
+        isOrganisationsFetched={true}
+      />,
     );
     const testInstance = element.root;
     expect(testInstance.findByType(OrganisationCard).props.details).toStrictEqual(
@@ -109,4 +124,30 @@ describe('OrgsManagement with', () => {
       new Error('No instances found with node type: "AddButton"'),
     );
   });
+
+  it('renders loading placeholder when API is being fetched', () => {
+    const element = createComponentWithIntl(
+      <OrgsManagement
+        organisations={orgData.organisations}
+        isOrgManager={true}
+        isAdmin={false}
+        isOrganisationsFetched={false}
+      />,
+    );
+    const testInstance = element.root;
+    expect(testInstance.findAllByProps({ className: 'show-loading-animation' }).length).toBe(4);
+  });
+
+  it('should not render loading placeholder after API is fetched', () => {
+    const element = createComponentWithIntl(
+      <OrgsManagement
+        organisations={orgData.organisations}
+        isOrgManager={true}
+        isAdmin={false}
+        isOrganisationsFetched={true}
+      />,
+    );
+    const testInstance = element.root;
+    expect(testInstance.findAllByProps({ className: 'show-loading-animation' }).length).toBe(0);
+  });
 });
diff --git a/frontend/src/components/teamsAndOrgs/tests/projects.test.js b/frontend/src/components/teamsAndOrgs/tests/projects.test.js
new file mode 100644
index 0000000000..5a503c9de5
--- /dev/null
+++ b/frontend/src/components/teamsAndOrgs/tests/projects.test.js
@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProviders } from '../../../utils/testWithIntl';
+import { Projects } from '../projects';
+
+it('renders loading placeholder when API is being fetched', () => {
+  const { container } = render(
+    <IntlProviders>
+      <Projects userDetails={{ role: 'ADMIN' }} projects={[]} viewAllEndpoint="/view/all" />
+    </IntlProviders>,
+  );
+  expect(
+    screen.getByRole('heading', {
+      name: /projects/i,
+    }),
+  ).toBeInTheDocument();
+  expect(container.getElementsByClassName('show-loading-animation')).toHaveLength(16);
+});
diff --git a/frontend/src/components/teamsAndOrgs/tests/teams.test.js b/frontend/src/components/teamsAndOrgs/tests/teams.test.js
index 2b3e3e576c..1f383f13ea 100644
--- a/frontend/src/components/teamsAndOrgs/tests/teams.test.js
+++ b/frontend/src/components/teamsAndOrgs/tests/teams.test.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
 import { FormattedMessage } from 'react-intl';
-
-import { createComponentWithIntl } from '../../../utils/testWithIntl';
-import { TeamBox, TeamsBoxList } from '../teams';
+import { createComponentWithIntl, ReduxIntlProviders } from '../../../utils/testWithIntl';
+import { TeamBox, TeamsBoxList, TeamsManagement } from '../teams';
 
 describe('test TeamBox', () => {
   const element = TestRenderer.create(
@@ -98,3 +99,107 @@ describe('test TeamBoxList without mapping and validation teams', () => {
     );
   });
 });
+
+describe('TeamsManagement component', () => {
+  it('renders loading placeholder when API is being fetched', async () => {
+    const { container, getByRole } = render(
+      <ReduxIntlProviders>
+        <TeamsManagement
+          userDetails={{ role: 'ADMIN' }}
+          managementView={true}
+          isTeamsFetched={false}
+        />
+      </ReduxIntlProviders>,
+    );
+    expect(
+      getByRole('button', {
+        name: /new/i,
+      }),
+    ).toBeInTheDocument();
+    expect(container.querySelectorAll('button')).toHaveLength(3);
+    expect(container.getElementsByClassName('show-loading-animation mb3')).toHaveLength(4);
+  });
+
+  it('does not render loading placeholder after API is fetched', () => {
+    const { container } = render(
+      <ReduxIntlProviders>
+        <TeamsManagement
+          userDetails={{ role: 'ADMIN' }}
+          managementView={true}
+          isTeamsFetched={true}
+        />
+      </ReduxIntlProviders>,
+    );
+    expect(container.getElementsByClassName('show-loading-animation mb3')).toHaveLength(0);
+  });
+
+  it("should not render 'Manage teams' but render 'My teams' text for non management view", () => {
+    render(
+      <ReduxIntlProviders>
+        <TeamsManagement
+          userDetails={{ role: 'ADMIN' }}
+          managementView={true}
+          isTeamsFetched={true}
+        />
+      </ReduxIntlProviders>,
+    );
+    expect(
+      screen.getByRole('heading', {
+        name: /manage teams/i,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('heading', {
+        name: /my teams/i,
+      }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders teams list card after API is fetched', async () => {
+    const dummyTeams = [
+      {
+        teamId: 3,
+        name: 'My Best Team',
+        role: 'PROJECT_MANAGER',
+        members: [
+          {
+            username: 'ram',
+            function: 'MEMBER',
+            active: true,
+            pictureUrl: null,
+          },
+        ],
+      },
+    ];
+    const { container, getByText } = render(
+      <ReduxIntlProviders>
+        <TeamsManagement
+          teams={dummyTeams}
+          userDetails={{ role: 'ADMIN' }}
+          managementView={true}
+          isTeamsFetched={true}
+        />
+      </ReduxIntlProviders>,
+    );
+    expect(container.querySelectorAll('h3')[0].textContent).toBe('Manage Teams');
+    expect(container.querySelectorAll('article').length).toBe(1);
+    expect(getByText('My Best Team')).toBeInTheDocument();
+    expect(getByText('Managers')).toBeInTheDocument();
+    expect(getByText('Team members')).toBeInTheDocument();
+    expect(getByText('My Best Team').closest('a').href).toContain('/manage/teams/3/');
+  });
+
+  it('renders relevant text if user is not a member of any team', async () => {
+    render(
+      <ReduxIntlProviders>
+        <TeamsManagement
+          teams={[]}
+          userDetails={{ role: 'ADMIN' }}
+          managementView={true}
+          isTeamsFetched={true}
+        />
+      </ReduxIntlProviders>,
+    );
+    expect(screen.getByText(/you are not a member of a team yet\./i)).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/user/list.js b/frontend/src/components/user/list.js
index 4b05182d37..bcb7ec81d9 100644
--- a/frontend/src/components/user/list.js
+++ b/frontend/src/components/user/list.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
+import ReactPlaceholder from 'react-placeholder';
 
 import messages from './messages';
 import { UserAvatar } from './avatar';
@@ -10,6 +11,7 @@ import { SearchIcon, CloseIcon } from '../svgIcons';
 import { Dropdown } from '../dropdown';
 import { SettingsIcon, CheckIcon } from '../svgIcons';
 import Popup from 'reactjs-popup';
+import { nCardPlaceholders } from './usersPlaceholder';
 
 const UserFilter = ({ filters, setFilters, updateFilters, intl }) => {
   const inputRef = useRef(null);
@@ -146,12 +148,19 @@ export const UsersTable = ({ filters, setFilters }) => {
   const [response, setResponse] = useState(null);
   const userDetails = useSelector((state) => state.auth.get('userDetails'));
   const [status, setStatus] = useState({ status: null, message: '' });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
     const fetchUsers = async (filters) => {
+      setLoading(true);
       const url = `users/?${filters}`;
-      const res = await fetchLocalJSONAPI(url, token);
-      setResponse(res);
+      fetchLocalJSONAPI(url, token)
+        .then((res) => {
+          setResponse(res);
+          setLoading(false);
+        })
+        .catch((err) => setError(err));
     };
 
     // Filter elements according to logic.
@@ -176,27 +185,35 @@ export const UsersTable = ({ filters, setFilters }) => {
     fetchUsers(urlFilters);
   }, [filters, token, status]);
 
-  if (response === null) {
-    return null;
-  }
-
   return (
     <div className="w-100">
-      <p className="f6 mt0">
-        <FormattedMessage {...messages.totalUsers} values={{ total: response.pagination.total }} />
-      </p>
+      {response?.users && (
+        <p className="f6 mt0">
+          <FormattedMessage
+            {...messages.totalUsers}
+            values={{ total: response.pagination.total }}
+          />
+        </p>
+      )}
       <div className="w-100 f5">
-        <ul className="list pa0 ma0">
-          {response.users.map((user) => (
-            <UserListCard
-              user={user}
-              key={user.id}
-              token={token}
-              username={userDetails.username}
-              setStatus={setStatus}
-            />
-          ))}
-        </ul>
+        <ReactPlaceholder
+          showLoadingAnimation={true}
+          customPlaceholder={nCardPlaceholders(4)}
+          delay={10}
+          ready={!loading && !error}
+        >
+          <ul className="list pa0 ma0">
+            {response?.users.map((user) => (
+              <UserListCard
+                user={user}
+                key={user.id}
+                token={token}
+                username={userDetails.username}
+                setStatus={setStatus}
+              />
+            ))}
+          </ul>
+        </ReactPlaceholder>
         {response === null || response.pagination.total === 0 ? null : (
           <PaginatorLine
             activePage={filters.page}
diff --git a/frontend/src/components/user/tests/list.test.js b/frontend/src/components/user/tests/list.test.js
new file mode 100644
index 0000000000..92edf2ff54
--- /dev/null
+++ b/frontend/src/components/user/tests/list.test.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { UsersTable } from '../list';
+import { ReduxIntlProviders } from '../../../utils/testWithIntl';
+import { store } from '../../../store';
+
+describe('User list card', () => {
+  it('renders user card', async () => {
+    const { container, getByText, getAllByRole } = render(
+      <ReduxIntlProviders store={store}>
+        <UsersTable
+          filters={{
+            level: 'ALL',
+            role: 'ALL',
+            username: '',
+            page: 1,
+          }}
+        />
+      </ReduxIntlProviders>,
+    );
+    await waitFor(() => {
+      expect(getByText(/Ram/i));
+    });
+    expect(getAllByRole('listitem')).toHaveLength(2);
+    expect(getByText(/total number of users: 220111/i)).toBeInTheDocument();
+    expect(screen.getByText('Ram').closest('a')).toHaveAttribute('href', '/users/Ram');
+    expect(screen.getAllByText('Mapper').length).toBe(2);
+    expect(getByText('Beginner')).toBeInTheDocument();
+    expect(getByText('Shyam')).toBeInTheDocument();
+    expect(screen.getByText('Shyam').closest('a')).toHaveAttribute('href', '/users/Shyam');
+    expect(screen.getByTitle(/Ram/i)).toHaveStyle(
+      `background-image: url(https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp)`,
+    );
+    expect(container.querySelectorAll('svg').length).toBe(2);
+  });
+});
diff --git a/frontend/src/components/user/usersPlaceholder.js b/frontend/src/components/user/usersPlaceholder.js
new file mode 100644
index 0000000000..d301ab54f0
--- /dev/null
+++ b/frontend/src/components/user/usersPlaceholder.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { TextRow, RoundShape } from 'react-placeholder/lib/placeholders';
+
+export const userCardPlaceholderTemplate = () => (_n, i) =>
+  (
+    <div
+      className={`bg-white cf flex items-center pa3 ba mb1 b--grey-light blue-dark shadow-hover`}
+    >
+      <div className="w-50-ns w-100 fl flex items-center">
+        <RoundShape
+          className="show-loading-animation dib mt1"
+          style={{ width: 32, height: 32 }}
+          color="#DDD"
+        />
+        <TextRow
+          className="show-loading-animation blue-grey mr2 ml3 dib"
+          color="#CCC"
+          style={{ width: '45%', marginTop: 0 }}
+        />
+      </div>
+      <div className="w-20 fl dib-ns dn tc">
+        <TextRow
+          className="show-loading-animation blue-grey mr2 ml3"
+          color="#CCC"
+          style={{ width: '45%', marginTop: 0 }}
+        />
+      </div>
+      <div className="w-20 fl dib-ns dn tc">
+        <TextRow
+          className="show-loading-animation blue-grey mr2 ml3"
+          color="#CCC"
+          style={{ width: '45%', marginTop: 0 }}
+        />
+      </div>
+    </div>
+  );
+
+export const nCardPlaceholders = (N) => {
+  return [...Array(N).keys()].map(userCardPlaceholderTemplate());
+};
diff --git a/frontend/src/network/tests/mockData/userList.js b/frontend/src/network/tests/mockData/userList.js
new file mode 100644
index 0000000000..0c217dfac3
--- /dev/null
+++ b/frontend/src/network/tests/mockData/userList.js
@@ -0,0 +1,29 @@
+export const usersList = {
+  users: [
+    {
+      id: 1,
+      username: 'Ram',
+      role: 'MAPPER',
+      mappingLevel: 'BEGINNER',
+      pictureUrl:
+        'https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp',
+    },
+    {
+      id: 2,
+      username: 'Shyam',
+      role: 'MAPPER',
+      mappingLevel: 'ADVANCED',
+      pictureUrl: null,
+    },
+  ],
+  pagination: {
+    hasNext: true,
+    hasPrev: false,
+    nextNum: 2,
+    page: 1,
+    pages: 11006,
+    prevNum: null,
+    perPage: 20,
+    total: 220111,
+  },
+};
diff --git a/frontend/src/network/tests/server-handlers.js b/frontend/src/network/tests/server-handlers.js
index 7cf28e25a1..998b0bd419 100644
--- a/frontend/src/network/tests/server-handlers.js
+++ b/frontend/src/network/tests/server-handlers.js
@@ -4,6 +4,7 @@ import { getProjectSummary, getProjectStats } from './mockData/projects';
 import { featuredProjects } from './mockData/featuredProjects';
 import { newUsersStats } from './mockData/userStats';
 import { projectContributions, projectContributionsByDay } from './mockData/contributions';
+import { usersList } from './mockData/userList';
 import tasksGeojson from '../../utils/tests/snippets/tasksGeometry';
 import { API_URL } from '../../config';
 
@@ -34,6 +35,9 @@ const handlers = [
   rest.get(API_URL + 'users/statistics/', async (req, res, ctx) => {
     return res(ctx.json(newUsersStats));
   }),
+  rest.get(API_URL + 'users', async (req, res, ctx) => {
+    return res(ctx.json(usersList));
+  }),
 ];
 
 export { handlers };
diff --git a/frontend/src/views/campaigns.js b/frontend/src/views/campaigns.js
index e114e696e0..e3d8b12f1a 100644
--- a/frontend/src/views/campaigns.js
+++ b/frontend/src/views/campaigns.js
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link, useNavigate } from '@reach/router';
-import ReactPlaceholder from 'react-placeholder';
-import { TextBlock, RectShape } from 'react-placeholder/lib/placeholders';
+
 import { FormattedMessage } from 'react-intl';
 import { Form } from 'react-final-form';
 
@@ -40,26 +39,14 @@ export function ListCampaigns() {
   const userDetails = useSelector((state) => state.auth.get('userDetails'));
   // TO DO: filter teams of current user
   const [error, loading, campaigns] = useFetch(`campaigns/`);
-
-  const placeHolder = (
-    <div className="pb4 bg-tan">
-      <div className="w-50-ns w-100 cf ph6-l ph4">
-        <TextBlock rows={1} className="bg-grey-light h3" />
-      </div>
-      <RectShape className="bg-white dib mv2 mh6" style={{ width: 250, height: 300 }} />
-      <RectShape className="bg-white dib mv2 mh6" style={{ width: 250, height: 300 }} />
-    </div>
-  );
+  const isCampaignsFetched = !loading && !error;
 
   return (
-    <ReactPlaceholder
-      showLoadingAnimation={true}
-      customPlaceholder={placeHolder}
-      delay={10}
-      ready={!error && !loading}
-    >
-      <CampaignsManagement campaigns={campaigns.campaigns} userDetails={userDetails} />
-    </ReactPlaceholder>
+    <CampaignsManagement
+      campaigns={campaigns.campaigns}
+      userDetails={userDetails}
+      isCampaignsFetched={isCampaignsFetched}
+    />
   );
 }
 
diff --git a/frontend/src/views/interests.js b/frontend/src/views/interests.js
index 895bc5e795..c7e54c461d 100644
--- a/frontend/src/views/interests.js
+++ b/frontend/src/views/interests.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { useFetch } from '../hooks/UseFetch';
-import { TextBlock, RectShape } from 'react-placeholder/lib/placeholders';
-import ReactPlaceholder from 'react-placeholder';
 import { Link, useNavigate } from '@reach/router';
 import { Form } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
@@ -76,26 +74,14 @@ export const ListInterests = () => {
   const userDetails = useSelector((state) => state.auth.get('userDetails'));
   // TO DO: filter teams of current user
   const [error, loading, interests] = useFetch(`interests/`);
-
-  const placeHolder = (
-    <div className="pb4 bg-tan">
-      <div className="w-50-ns w-100 cf ph6-l ph4">
-        <TextBlock rows={1} className="bg-grey-light h3" />
-      </div>
-      <RectShape className="bg-white dib mv2 mh6" style={{ width: 250, height: 300 }} />
-      <RectShape className="bg-white dib mv2 mh6" style={{ width: 250, height: 300 }} />
-    </div>
-  );
+  const isInterestsFetched = !loading && !error;
 
   return (
-    <ReactPlaceholder
-      showLoadingAnimation={true}
-      customPlaceholder={placeHolder}
-      delay={10}
-      ready={!error && !loading}
-    >
-      <InterestsManagement interests={interests.interests} userDetails={userDetails} />
-    </ReactPlaceholder>
+    <InterestsManagement
+      interests={interests.interests}
+      userDetails={userDetails}
+      isInterestsFetched={isInterestsFetched}
+    />
   );
 };
 
diff --git a/frontend/src/views/licenses.js b/frontend/src/views/licenses.js
index 1049a718fd..8e5b02f7c6 100644
--- a/frontend/src/views/licenses.js
+++ b/frontend/src/views/licenses.js
@@ -2,8 +2,6 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useFetch } from '../hooks/UseFetch';
 import { useSetTitleTag } from '../hooks/UseMetaTags';
-import { TextBlock, RectShape } from 'react-placeholder/lib/placeholders';
-import ReactPlaceholder from 'react-placeholder';
 import { Link, useNavigate } from '@reach/router';
 import { Form } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
@@ -49,26 +47,14 @@ export const ListLicenses = () => {
   const userDetails = useSelector((state) => state.auth.get('userDetails'));
   // TO DO: filter teams of current user
   const [error, loading, licenses] = useFetch(`licenses/`);
-
-  const placeHolder = (
-    <div className="pb4 bg-tan">
-      <div className="w-50-ns w-100 cf ph6-l ph4">
-        <TextBlock rows={1} className="bg-grey-light h3" />
-      </div>
-      <RectShape className="bg-white dib mv2 mh6" style={{ width: 250, height: 300 }} />
-      <RectShape className="bg-white dib mv2 mh6" style={{ width: 250, height: 300 }} />
-    </div>
-  );
+  const isLicensesFetched = !loading && !error;
 
   return (
-    <ReactPlaceholder
-      showLoadingAnimation={true}
-      customPlaceholder={placeHolder}
-      delay={10}
-      ready={!error && !loading}
-    >
-      <LicensesManagement licenses={licenses.licenses} userDetails={userDetails} />
-    </ReactPlaceholder>
+    <LicensesManagement
+      licenses={licenses.licenses}
+      userDetails={userDetails}
+      isLicensesFetched={isLicensesFetched}
+    />
   );
 };
 
diff --git a/frontend/src/views/organisationManagement.js b/frontend/src/views/organisationManagement.js
index b3a3eea953..4bc630033e 100644
--- a/frontend/src/views/organisationManagement.js
+++ b/frontend/src/views/organisationManagement.js
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Link, useNavigate } from '@reach/router';
 import ReactPlaceholder from 'react-placeholder';
-import { RectShape } from 'react-placeholder/lib/placeholders';
 import { FormattedMessage } from 'react-intl';
 import { Form } from 'react-final-form';
 
@@ -32,37 +31,31 @@ export function ListOrganisations() {
   );
   const [organisations, setOrganisations] = useState(null);
   const [userOrgsOnly, setUserOrgsOnly] = useState(userDetails.role === 'ADMIN' ? false : true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
   useEffect(() => {
     if (token && userDetails && userDetails.id) {
+      setLoading(true);
       const queryParam = `${userOrgsOnly ? `?manager_user_id=${userDetails.id}` : ''}`;
-      fetchLocalJSONAPI(`organisations/${queryParam}`, token).then((orgs) =>
-        setOrganisations(orgs.organisations),
-      );
+      fetchLocalJSONAPI(`organisations/${queryParam}`, token)
+        .then((orgs) => {
+          setOrganisations(orgs.organisations);
+          setLoading(false);
+        })
+        .catch((err) => setError(err));
     }
   }, [userDetails, token, userOrgsOnly]);
 
-  const placeHolder = (
-    <div className="pb4 bg-tan">
-      <RectShape className="bg-white dib mv2" style={{ width: 700, height: 250 }} />
-      <RectShape className="bg-white dib mv2" style={{ width: 700, height: 250 }} />
-    </div>
-  );
-
   return (
-    <ReactPlaceholder
-      showLoadingAnimation={true}
-      customPlaceholder={placeHolder}
-      delay={10}
-      ready={organisations !== null}
-    >
-      <OrgsManagement
-        organisations={organisations}
-        userOrgsOnly={userOrgsOnly}
-        setUserOrgsOnly={setUserOrgsOnly}
-        isOrgManager={userDetails.role === 'ADMIN' || isOrgManager}
-        isAdmin={userDetails.role === 'ADMIN'}
-      />
-    </ReactPlaceholder>
+    <OrgsManagement
+      organisations={organisations}
+      userOrgsOnly={userOrgsOnly}
+      setUserOrgsOnly={setUserOrgsOnly}
+      isOrgManager={userDetails.role === 'ADMIN' || isOrgManager}
+      isAdmin={userDetails.role === 'ADMIN'}
+      isOrganisationsFetched={!loading && !error}
+    />
   );
 }
 
diff --git a/frontend/src/views/teams.js b/frontend/src/views/teams.js
index eccbf453ca..19006c8a76 100644
--- a/frontend/src/views/teams.js
+++ b/frontend/src/views/teams.js
@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Link, useNavigate } from '@reach/router';
-import ReactPlaceholder from 'react-placeholder';
-import { TextBlock, RectShape } from 'react-placeholder/lib/placeholders';
 import { FormattedMessage } from 'react-intl';
 import { Form } from 'react-final-form';
 
@@ -50,6 +48,8 @@ export function ListTeams({ managementView = false }: Object) {
   const token = useSelector((state) => state.auth.get('token'));
   const [teams, setTeams] = useState(null);
   const [userTeamsOnly, setUserTeamsOnly] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
     if (token && userDetails && userDetails.id) {
@@ -59,36 +59,25 @@ export function ListTeams({ managementView = false }: Object) {
       } else {
         queryParam = `?member=${userDetails.id}`;
       }
-      fetchLocalJSONAPI(`teams/${queryParam}`, token).then((res) => setTeams(res.teams));
+      setLoading(true);
+      fetchLocalJSONAPI(`teams/${queryParam}`, token)
+        .then((res) => {
+          setTeams(res.teams);
+          setLoading(false);
+        })
+        .catch((err) => setError(err));
     }
   }, [userDetails, token, managementView, userTeamsOnly]);
 
-  const placeHolder = (
-    <div className="pb4 bg-tan">
-      <div className="w-50-ns w-100 cf ph6-l ph4">
-        <TextBlock rows={1} className="bg-grey-light h3" />
-        <TextBlock rows={1} className="bg-grey-light h2 mt2" />
-      </div>
-      <RectShape className="bg-white dib mv2 mh6" style={{ width: 250, height: 300 }} />
-      <RectShape className="bg-white dib mv2 mh6" style={{ width: 250, height: 300 }} />
-    </div>
-  );
-
   return (
-    <ReactPlaceholder
-      showLoadingAnimation={true}
-      customPlaceholder={placeHolder}
-      delay={10}
-      ready={teams !== null}
-    >
-      <TeamsManagement
-        teams={teams}
-        userDetails={userDetails}
-        managementView={managementView}
-        userTeamsOnly={userTeamsOnly}
-        setUserTeamsOnly={setUserTeamsOnly}
-      />
-    </ReactPlaceholder>
+    <TeamsManagement
+      teams={teams}
+      userDetails={userDetails}
+      managementView={managementView}
+      userTeamsOnly={userTeamsOnly}
+      setUserTeamsOnly={setUserTeamsOnly}
+      isTeamsFetched={!loading && !error}
+    />
   );
 }