diff --git a/package-lock.json b/package-lock.json
index 2c4693cd..bcfc8a8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,6 @@
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
       "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.10.4"
       }
@@ -489,7 +488,6 @@
       "version": "7.12.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
       "integrity": "sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.5"
       },
@@ -498,7 +496,6 @@
           "version": "7.12.10",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
           "integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.4",
             "lodash": "^4.17.19",
@@ -508,8 +505,7 @@
         "lodash": {
           "version": "4.17.20",
           "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
-          "dev": true
+          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
         }
       }
     },
@@ -804,7 +800,6 @@
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
       "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.10.4",
         "chalk": "^2.0.0",
@@ -2041,6 +2036,94 @@
         }
       }
     },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
+      "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.27",
+        "@emotion/css": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
+      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+      "requires": {
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3",
+        "babel-plugin-emotion": "^10.0.27"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.14",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+        }
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@formatjs/ecma402-abstract": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.3.tgz",
@@ -3376,8 +3459,7 @@
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
     "@types/prettier": {
       "version": "2.1.5",
@@ -4754,6 +4836,30 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.33",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
@@ -4779,6 +4885,30 @@
         "@types/babel__traverse": "^7.0.6"
       }
     },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        }
+      }
+    },
     "babel-plugin-react-intl": {
       "version": "8.2.21",
       "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-8.2.21.tgz",
@@ -4886,6 +5016,11 @@
         }
       }
     },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-transform-imports": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-imports/-/babel-plugin-transform-imports-2.0.0.tgz",
@@ -5902,8 +6037,7 @@
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "camel-case": {
       "version": "4.1.2",
@@ -10308,6 +10442,11 @@
         "pkg-dir": "^3.0.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -11986,7 +12125,6 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.2.tgz",
       "integrity": "sha512-cTPNrlvJT6twpYy+YmKUKrTSjWFs3bjYjAhCwm+z4EOCubZxAuO+hHpRN64TqjEaYSHs7tJAE0w1CKMGmsG/lw==",
-      "dev": true,
       "requires": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -16727,7 +16865,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       }
@@ -16749,7 +16886,6 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
       "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -16858,8 +16994,7 @@
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
     "pbkdf2": {
       "version": "3.1.1",
@@ -18546,6 +18681,14 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-loading-skeleton": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-2.1.1.tgz",
+      "integrity": "sha512-+fGvgG9ieUw4D5QVgpqJkJ75jhzUdz96GRsA0HjTlR0Mpj9DJUEFc0AKELs7ZkqWVH8/DiroaaufSrOPld1kGA==",
+      "requires": {
+        "@emotion/core": "^10.0.22"
+      }
+    },
     "react-overlays": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
@@ -19436,8 +19579,7 @@
     "resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
     },
     "resolve-pathname": {
       "version": "3.0.0",
@@ -23801,8 +23943,7 @@
     "yaml": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
-      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
-      "dev": true
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
     },
     "yargs": {
       "version": "15.4.1",
diff --git a/package.json b/package.json
index 37155d1c..bf2945c6 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-loading-skeleton": "^2.1.1",
     "react-redux": "7.2.2",
     "react-router": "5.2.0",
     "react-router-dom": "^5.2.0",
diff --git a/src/data/constants.js b/src/data/constants.js
index f8ed2adb..583d9f21 100644
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -10,9 +10,10 @@ export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
 // Constants
 export const SUPPORTED_ICON_CLASSES = ['apple', 'facebook', 'google', 'microsoft'];
 
-// Stateful Submit Button States
+// States
 export const DEFAULT_STATE = 'default';
 export const PENDING_STATE = 'pending';
+export const COMPLETE_STATE = 'complete';
 
 export const REGISTRATION_VALIDITY_MAP = {};
 export const REGISTRATION_OPTIONAL_MAP = {};
diff --git a/src/logistration/LoginPage.jsx b/src/logistration/LoginPage.jsx
index 437f0ac2..5d3f8d88 100644
--- a/src/logistration/LoginPage.jsx
+++ b/src/logistration/LoginPage.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Skeleton from 'react-loading-skeleton';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
@@ -20,7 +21,7 @@ import SocialAuthProviders from './SocialAuthProviders';
 import ThirdPartyAuthAlert from './ThirdPartyAuthAlert';
 
 import {
-  DEFAULT_REDIRECT_URL, DEFAULT_STATE, LOGIN_PAGE, REGISTER_PAGE, ENTERPRISE_LOGIN_URL,
+  DEFAULT_REDIRECT_URL, DEFAULT_STATE, LOGIN_PAGE, REGISTER_PAGE, ENTERPRISE_LOGIN_URL, PENDING_STATE,
 } from '../data/constants';
 import { forgotPasswordResultSelector } from '../forgot-password';
 
@@ -120,8 +121,31 @@ class LoginPage extends React.Component {
     });
   }
 
+  renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl) {
+    let thirdPartyComponent = null;
+    if ((providers.length || secondaryProviders.length) && !currentProvider) {
+      thirdPartyComponent = (
+        <>
+          <RenderInstitutionButton
+            onSubmitHandler={this.handleInstitutionLogin}
+            secondaryProviders={secondaryProviders}
+            buttonTitle={intl.formatMessage(messages['logistration.login.institution.login.button'])}
+          />
+          <div className="row tpa-container">
+            <SocialAuthProviders socialAuthProviders={providers} />
+          </div>
+        </>
+      );
+    } else if (thirdPartyAuthApiStatus === PENDING_STATE) {
+      thirdPartyComponent = <Skeleton height={36} />;
+    } return thirdPartyComponent;
+  }
+
   render() {
-    const { intl, submitState, thirdPartyAuthContext } = this.props;
+    const {
+      intl, submitState, thirdPartyAuthContext, thirdPartyAuthApiStatus,
+    } = this.props;
+    const { currentProvider, providers, secondaryProviders } = this.props.thirdPartyAuthContext;
 
     if (this.state.institutionLogin) {
       return (
@@ -163,18 +187,6 @@ class LoginPage extends React.Component {
               <h2 className="text-left mt-2 mb-3">
                 {intl.formatMessage(messages['logistration.login.institution.login.sign.in'])}
               </h2>
-              {thirdPartyAuthContext.secondaryProviders.length ? (
-                <>
-                  <RenderInstitutionButton
-                    onSubmitHandler={this.handleInstitutionLogin}
-                    secondaryProviders={thirdPartyAuthContext.secondaryProviders}
-                    buttonTitle={intl.formatMessage(messages['logistration.login.institution.login.button'])}
-                  />
-                  <div className="mb-4 mt-20">
-                    <h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
-                  </div>
-                </>
-              ) : null }
               <Form className="m-0">
                 <ValidationFormGroup
                   for="email"
@@ -226,16 +238,13 @@ class LoginPage extends React.Component {
                   onClick={this.handleSubmit}
                 />
               </Form>
-              {thirdPartyAuthContext.providers.length && !thirdPartyAuthContext.currentProvider ? (
-                <>
-                  <div className="mb-4 mt-20">
+              {(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
+                && !currentProvider ? (
+                  <div className="section-heading-line mb-4">
                     <h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
                   </div>
-                  <div className="row tpa-container">
-                    <SocialAuthProviders socialAuthProviders={thirdPartyAuthContext.providers} />
-                  </div>
-                </>
-              ) : null}
+                ) : null}
+              {this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)}
             </div>
           </div>
         </div>
@@ -249,6 +258,7 @@ LoginPage.defaultProps = {
   loginResult: null,
   loginError: null,
   submitState: DEFAULT_STATE,
+  thirdPartyAuthApiStatus: 'pending',
   thirdPartyAuthContext: {
     currentProvider: null,
     finishAuthUrl: null,
@@ -271,6 +281,7 @@ LoginPage.propTypes = {
     success: PropTypes.bool,
   }),
   submitState: PropTypes.string,
+  thirdPartyAuthApiStatus: PropTypes.string,
   thirdPartyAuthContext: PropTypes.shape({
     currentProvider: PropTypes.string,
     platformName: PropTypes.string,
@@ -287,6 +298,7 @@ const mapStateToProps = state => {
   const loginError = loginErrorSelector(state);
   return {
     submitState: state.logistration.submitState,
+    thirdPartyAuthApiStatus: state.logistration.thirdPartyAuthApiStatus,
     forgotPassword,
     loginError,
     loginResult,
diff --git a/src/logistration/RegistrationPage.jsx b/src/logistration/RegistrationPage.jsx
index 036169f7..4512b2ed 100644
--- a/src/logistration/RegistrationPage.jsx
+++ b/src/logistration/RegistrationPage.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import Skeleton from 'react-loading-skeleton';
 import PropTypes from 'prop-types';
 import {
   Input,
@@ -26,6 +27,7 @@ import RegistrationFailure from './RegistrationFailure';
 import {
   DEFAULT_REDIRECT_URL,
   DEFAULT_STATE,
+  PENDING_STATE,
   LOGIN_PAGE,
   REGISTER_PAGE,
   REGISTRATION_VALIDITY_MAP,
@@ -479,6 +481,30 @@ class RegistrationPage extends React.Component {
     return [{ user_message: isFieldInValid ? this.intl.formatMessage(messages[messageID]) : '' }];
   }
 
+  renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl) {
+    let thirdPartyComponent = null;
+    if ((providers.length || secondaryProviders.length) && !currentProvider) {
+      thirdPartyComponent = (
+        <>
+          <RenderInstitutionButton
+            onSubmitHandler={this.handleInstitutionLogin}
+            secondaryProviders={this.props.thirdPartyAuthContext.secondaryProviders}
+            buttonTitle={intl.formatMessage(messages['logistration.register.institution.login.button'])}
+          />
+          <div className="row tpa-container">
+            <SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
+          </div>
+          <span className="d-block mx-auto text-center mt-4 section-heading-line">
+            {intl.formatMessage(messages['logistration.create.a.new.one.here'])}
+          </span>
+        </>
+      );
+    } else if (thirdPartyAuthApiStatus === PENDING_STATE) {
+      thirdPartyComponent = <Skeleton height={36} count={2} />;
+    }
+    return thirdPartyComponent;
+  }
+
   renderErrors() {
     let errorsObject = null;
     if (!this.checkNoValidationsErrors(this.state.validationErrorsAlertMessages)) {
@@ -492,7 +518,7 @@ class RegistrationPage extends React.Component {
   }
 
   render() {
-    const { intl, submitState } = this.props;
+    const { intl, submitState, thirdPartyAuthApiStatus } = this.props;
     const {
       currentProvider, finishAuthUrl, providers, secondaryProviders,
     } = this.props.thirdPartyAuthContext;
@@ -534,24 +560,15 @@ class RegistrationPage extends React.Component {
                 <span>{intl.formatMessage(messages['logistration.already.have.an.edx.account'])}</span>
                 <a href={LOGIN_PAGE}>{intl.formatMessage(messages['logistration.sign.in.hyperlink'])}</a>
               </div>
-              {(providers.length || secondaryProviders.length) && !currentProvider ? (
-                <div className="d-block mb-4 mt-4">
-                  <h4 className="d-block mx-auto mb-4">
-                    {intl.formatMessage(messages['logistration.create.an.account.using'])}
-                  </h4>
-                  <div className="row tpa-container mb-3">
-                    <SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
+              {(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
+                && !currentProvider ? (
+                  <div className="d-block mb-4 mt-4">
+                    <h4 className="d-block mx-auto mb-4">
+                      {intl.formatMessage(messages['logistration.create.an.account.using'])}
+                    </h4>
                   </div>
-                  <RenderInstitutionButton
-                    onSubmitHandler={this.handleInstitutionLogin}
-                    secondaryProviders={this.props.thirdPartyAuthContext.secondaryProviders}
-                    buttonTitle={intl.formatMessage(messages['logistration.register.institution.login.button'])}
-                  />
-                  <h4 className="d-block mx-auto mt-4">
-                    {intl.formatMessage(messages['logistration.create.a.new.one.here'])}
-                  </h4>
-                </div>
-              ) : null}
+                ) : null}
+              {this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)}
               <Form className="mb-4 form-group">
                 <ValidationFormGroup
                   for="name"
@@ -686,6 +703,7 @@ RegistrationPage.defaultProps = {
   registerNewUser: null,
   registrationError: null,
   submitState: DEFAULT_STATE,
+  thirdPartyAuthApiStatus: 'pending',
   thirdPartyAuthContext: {
     currentProvider: null,
     finishAuthUrl: null,
@@ -711,6 +729,7 @@ RegistrationPage.propTypes = {
     username: PropTypes.array,
   }),
   submitState: PropTypes.string,
+  thirdPartyAuthApiStatus: PropTypes.string,
   thirdPartyAuthContext: PropTypes.shape({
     currentProvider: PropTypes.string,
     platformName: PropTypes.string,
@@ -749,6 +768,7 @@ const mapStateToProps = state => {
   return {
     registrationError: state.logistration.registrationError,
     submitState: state.logistration.submitState,
+    thirdPartyAuthApiStatus: state.logistration.thirdPartyAuthApiStatus,
     registrationResult,
     thirdPartyAuthContext,
     formData: state.logistration.formData,
diff --git a/src/logistration/data/reducers.js b/src/logistration/data/reducers.js
index 78f24fea..86f9a933 100644
--- a/src/logistration/data/reducers.js
+++ b/src/logistration/data/reducers.js
@@ -6,7 +6,7 @@ import {
   REGISTER_FORM_VALIDATIONS,
 } from './actions';
 
-import { DEFAULT_STATE, PENDING_STATE } from '../../data/constants';
+import { DEFAULT_STATE, PENDING_STATE, COMPLETE_STATE } from '../../data/constants';
 
 export const defaultState = {
   loginError: null,
@@ -55,15 +55,18 @@ const reducer = (state = defaultState, action) => {
     case THIRD_PARTY_AUTH_CONTEXT.BEGIN:
       return {
         ...state,
+        thirdPartyAuthApiStatus: PENDING_STATE,
       };
     case THIRD_PARTY_AUTH_CONTEXT.SUCCESS:
       return {
         ...state,
         thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
+        thirdPartyAuthApiStatus: COMPLETE_STATE,
       };
     case THIRD_PARTY_AUTH_CONTEXT.FAILURE:
       return {
         ...state,
+        thirdPartyAuthApiStatus: COMPLETE_STATE,
       };
     case REGISTER_FORM.BEGIN:
       return {
diff --git a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
index 9373effb..78d76ca5 100644
--- a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
+++ b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
@@ -154,7 +154,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
         </button>
       </form>
       <div
-        className="mb-4 mt-20"
+        className="section-heading-line mb-4"
       >
         <h4>
           or sign in with
@@ -345,6 +345,25 @@ exports[`LoginPage should match default section snapshot 1`] = `
           </span>
         </button>
       </form>
+      <div
+        className="section-heading-line mb-4"
+      >
+        <h4>
+          or sign in with
+        </h4>
+      </div>
+      <span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+      </span>
     </div>
   </div>
 </div>
@@ -503,6 +522,25 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
           </span>
         </button>
       </form>
+      <div
+        className="section-heading-line mb-4"
+      >
+        <h4>
+          or sign in with
+        </h4>
+      </div>
+      <span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+      </span>
     </div>
   </div>
 </div>
@@ -670,6 +708,25 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
           </span>
         </button>
       </form>
+      <div
+        className="section-heading-line mb-4"
+      >
+        <h4>
+          or sign in with
+        </h4>
+      </div>
+      <span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+      </span>
     </div>
   </div>
 </div>
@@ -845,6 +902,25 @@ exports[`LoginPage should show error message 1`] = `
           </span>
         </button>
       </form>
+      <div
+        className="section-heading-line mb-4"
+      >
+        <h4>
+          or sign in with
+        </h4>
+      </div>
+      <span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+      </span>
     </div>
   </div>
 </div>
diff --git a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
index 3cb2143f..a55df9d3 100644
--- a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
@@ -31,6 +31,28 @@ exports[`./RegistrationPage.js should display no password field when current pro
            Sign in.
         </a>
       </div>
+      <span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+      </span>
       <form
         className="mb-4 form-group"
       >
@@ -225,38 +247,38 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
         >
           Create an account using
         </h4>
-        <div
-          className="row tpa-container mb-3"
-        >
-          <button
-            className="btn-social btn-oa2-apple-id"
-            id="oa2-apple-id"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-            >
-              <img
-                alt="icon Apple"
-                className="icon-image"
-                src="https://edx.devstack.lms/logo.png"
-              />
-            </div>
-            <span
-              aria-hidden="true"
-              className="pl-2"
-            >
-              Apple
-            </span>
-          </button>
-        </div>
-        <h4
-          className="d-block mx-auto mt-4"
-        >
-          or create a new one here
-        </h4>
       </div>
+      <div
+        className="row tpa-container"
+      >
+        <button
+          className="btn-social btn-oa2-apple-id"
+          id="oa2-apple-id"
+          onClick={[Function]}
+          type="button"
+        >
+          <div
+            aria-hidden="true"
+          >
+            <img
+              alt="icon Apple"
+              className="icon-image"
+              src="https://edx.devstack.lms/logo.png"
+            />
+          </div>
+          <span
+            aria-hidden="true"
+            className="pl-2"
+          >
+            Apple
+          </span>
+        </button>
+      </div>
+      <span
+        className="d-block mx-auto text-center mt-4 section-heading-line"
+      >
+        or create a new one here
+      </span>
       <form
         className="mb-4 form-group"
       >
@@ -472,6 +494,37 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
            Sign in.
         </a>
       </div>
+      <div
+        className="d-block mb-4 mt-4"
+      >
+        <h4
+          className="d-block mx-auto mb-4"
+        >
+          Create an account using
+        </h4>
+      </div>
+      <span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+      </span>
       <form
         className="mb-4 form-group"
       >
@@ -687,6 +740,37 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
            Sign in.
         </a>
       </div>
+      <div
+        className="d-block mb-4 mt-4"
+      >
+        <h4
+          className="d-block mx-auto mb-4"
+        >
+          Create an account using
+        </h4>
+      </div>
+      <span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+      </span>
       <form
         className="mb-4 form-group"
       >
@@ -937,6 +1021,37 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
            Sign in.
         </a>
       </div>
+      <div
+        className="d-block mb-4 mt-4"
+      >
+        <h4
+          className="d-block mx-auto mb-4"
+        >
+          Create an account using
+        </h4>
+      </div>
+      <span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+        <span
+          className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+          style={
+            Object {
+              "height": 36,
+            }
+          }
+        >
+          ‌
+        </span>
+      </span>
       <form
         className="mb-4 form-group"
       >