From 036dddc991c10d8cf6b336f085d7ca70d8664b70 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Tue, 18 Jan 2022 14:07:14 +0100
Subject: [PATCH] Wait for data and datatype before rendering
 HistoryDatasetsDisplay

---
 .../Elements/HistoryDatasetDisplay.vue        | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index d2aa24aa9bb..05d180b467d 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -33,44 +33,42 @@
         </b-card-header>
         <b-card-body>
             <UrlDataProvider :url="itemUrl" v-slot="{ result: itemContent, loading, error }">
-                <LoadingSpan v-if="loading" message="Loading Dataset" />
-                <div v-else-if="error">{{ error }}</div>
-                <div v-else class="embedded-dataset content-height">
-                    <UrlDataProvider :url="datatypesUrl" v-slot="{ result: datatypesModel, loading: datatypesLoading }">
-                        <LoadingSpan v-if="datatypesLoading" message="Loading Datatypes" />
-                        <div v-else>
-                            <b-embed
-                                v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
-                                type="iframe"
-                                aspect="16by9"
-                                :src="displayUrl"
-                            />
-                            <div v-else-if="itemContent.item_data">
-                                <div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
-                                    <UrlDataProvider
-                                        :url="metaUrl"
-                                        v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
-                                    >
-                                        <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
-                                        <div v-else-if="metaError">{{ metaError }}</div>
-                                        <b-table
-                                            v-else
-                                            striped
-                                            hover
-                                            :fields="getFields(metaData)"
-                                            :items="getItems(itemContent.item_data, metaData)"
-                                        />
-                                    </UrlDataProvider>
-                                </div>
-                                <pre v-else>
+                <UrlDataProvider :url="datatypesUrl" v-slot="{ result: datatypesModel, loading: datatypesLoading }">
+                    <LoadingSpan v-if="loading" message="Loading Dataset" />
+                    <LoadingSpan v-else-if="datatypesLoading" message="Loading Datatypes" />
+                    <div v-else-if="error">{{ error }}</div>
+                    <div v-else class="embedded-dataset content-height">
+                        <b-embed
+                            v-if="isSubTypeOfAny(datasetType, ['pdf', 'html'], datatypesModel)"
+                            type="iframe"
+                            aspect="16by9"
+                            :src="displayUrl"
+                        />
+                        <div v-else-if="itemContent.item_data">
+                            <div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
+                                <UrlDataProvider
+                                    :url="metaUrl"
+                                    v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
+                                >
+                                    <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                                    <div v-else-if="metaError">{{ metaError }}</div>
+                                    <b-table
+                                        v-else
+                                        striped
+                                        hover
+                                        :fields="getFields(metaData)"
+                                        :items="getItems(itemContent.item_data, metaData)"
+                                    />
+                                </UrlDataProvider>
+                            </div>
+                            <pre v-else>
                                     <code class="text-normalwrap">{{ itemContent.item_data }}</code>
                                 </pre>
-                            </div>
-                            <div v-else>No content found.</div>
-                            <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
                         </div>
-                    </UrlDataProvider>
-                </div>
+                        <div v-else>No content found.</div>
+                        <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+                    </div>
+                </UrlDataProvider>
             </UrlDataProvider>
         </b-card-body>
     </b-card>