site loader

frontend/src/components/UI/CardSection.vue

@@ -95,20 +95,14 @@
     </div>
     <div v-intersect="bumpList" class="d-flex">
       <v-expand-x-transition>
-        <v-progress-circular
-          v-if="loading"
-          class="mx-auto mt-1"
-          :size="50"
-          :width="7"
-          color="primary"
-          indeterminate
-        ></v-progress-circular>
+        <SiteLoader v-if="loading" :loading="loading" :size="150" />
       </v-expand-x-transition>
     </div>
   </div>
 </template>
 
 <script>
+import SiteLoader from "@/components/UI/SiteLoader";
 import RecipeCard from "../Recipe/RecipeCard";
 import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
 import { utils } from "@/utils";
@@ -118,6 +112,7 @@ export default {
   components: {
     RecipeCard,
     MobileRecipeCard,
+    SiteLoader,
   },
   props: {
     disableToolbar: {

frontend/src/components/UI/Dialogs/SearchDialog.vue

@@ -43,25 +43,31 @@
           </div>
           <router-link to="/search"> Advanced Search </router-link>
         </v-card-actions>
-        <MobileRecipeCard
-          v-for="(recipe, index) in results.slice(0, 10)"
-          :tabindex="index"
-          :key="index"
-          class="ma-1 arrow-nav"
-          :name="recipe.name"
-          :description="recipe.description"
-          :slug="recipe.slug"
-          :rating="recipe.rating"
-          :image="recipe.image"
-          :route="true"
-          v-on="$listeners.selected ? { selected: () => grabRecipe(recipe) } : {}"
-        />
+        <v-card-actions v-if="loading">
+          <SiteLoader :loading="loading" />
+        </v-card-actions>
+        <div v-else>
+          <MobileRecipeCard
+            v-for="(recipe, index) in results.slice(0, 10)"
+            :tabindex="index"
+            :key="index"
+            class="ma-1 arrow-nav"
+            :name="recipe.name"
+            :description="recipe.description"
+            :slug="recipe.slug"
+            :rating="recipe.rating"
+            :image="recipe.image"
+            :route="true"
+            v-on="$listeners.selected ? { selected: () => grabRecipe(recipe) } : {}"
+          />
+        </div>
       </v-card>
     </v-dialog>
   </div>
 </template>
 
 <script>
+import SiteLoader from "@/components/UI/SiteLoader";
 const SELECTED_EVENT = "selected";
 import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
 import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
@@ -69,9 +75,11 @@ export default {
   components: {
     FuseSearchBar,
     MobileRecipeCard,
+    SiteLoader,
   },
   data() {
     return {
+      loading: false,
       selectedIndex: -1,
       dialog: false,
       searchString: "",
@@ -82,14 +90,17 @@ export default {
     $route() {
       this.dialog = false;
     },
-    dialog(val) {
+    async dialog(val) {
       if (!val) {
         this.resetSelected();
+      } else if (this.allItems.length <= 0) {
+        this.loading = true;
+        await this.$store.dispatch("requestAllRecipes");
+        this.loading = false;
       }
     },
   },
   mounted() {
-    this.$store.dispatch("requestAllRecipes");
     document.addEventListener("keydown", this.onUpDown);
   },
   beforeDestroy() {

frontend/src/components/UI/SiteLoader.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-progress-circular class="mx-auto" :width="size / 20" :size="size" color="primary lighten-2" indeterminate>
+    <div class="text-center">
+      <v-icon :size="size / 2" color="primary lighten-2">
+        {{ $globals.icons.primary }}
+      </v-icon>
+      <div>
+        Loading Recipes
+      </div>
+    </div>
+  </v-progress-circular>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: {
+      default: true,
+    },
+    size: {
+      default: 200,
+    },
+  },
+};
+</script>

frontend/src/components/UI/TheAppBar.vue

@@ -18,12 +18,9 @@
       </div>
 
       <v-spacer></v-spacer>
-      <SearchBar
-        v-if="!isMobile"
-        :show-results="true"
-        @selected="navigateFromSearch"
-        :max-width="isMobile ? '100%' : '450px'"
-      />
+      <div v-if="!isMobile" style="width: 350px;">
+        <SearchBar :show-results="true" @selected="navigateFromSearch" :max-width="isMobile ? '100%' : '450px'" />
+      </div>
       <div v-else>
         <v-btn icon @click="$refs.recipeSearch.open()">
           <v-icon> mdi-magnify </v-icon>

frontend/src/pages/Admin/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="pa-5">
+  <v-container fluid class="pa-5">
     <v-slide-x-transition hide-on-leave>
       <router-view></router-view>
     </v-slide-x-transition>
-  </div>
+  </v-container>
 </template>
 
 <script>

frontend/src/pages/Recipes/AllRecipes.vue

@@ -1,6 +1,5 @@
 <template>
   <v-container>
-    <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
     <CardSection
       title-icon=""
       :sortable="true"
@@ -8,14 +7,19 @@
       :recipes="shownRecipes"
       @sort="assignSorted"
     />
+    <v-row class="d-flex">
+      <SiteLoader class="mx-auto" v-if="loading" :loading="loading" :size="200" />
+    </v-row>
   </v-container>
 </template>
 
 <script>
+import SiteLoader from "@/components/UI/SiteLoader";
 import CardSection from "@/components/UI/CardSection";
 
 export default {
   components: {
+    SiteLoader,
     CardSection,
   },
   data() {

frontend/src/routes/admin.js

@@ -1,11 +1,11 @@
-const Admin = () => import("@/pages/Admin");
-const Migration = () => import("@/pages/Admin/Migration");
-const Profile = () => import("@/pages/Admin/Profile");
-const ManageUsers = () => import("@/pages/Admin/ManageUsers");
-const Settings = () => import("@/pages/Admin/Settings");
-const About = () => import("@/pages/Admin/About");
-const ToolBox = () => import("@/pages/Admin/ToolBox");
-const Dashboard = () => import("@/pages/Admin/Dashboard");
+const Admin = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin");
+const Migration = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Migration");
+const Profile = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Profile");
+const ManageUsers = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/ManageUsers");
+const Settings = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Settings");
+const About = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/About");
+const ToolBox = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/ToolBox");
+const Dashboard = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Dashboard");
 import { store } from "../store";
 
 export const adminRoutes = {

frontend/src/routes/recipes.js

@@ -1,8 +1,8 @@
-const ViewRecipe = () => import("@/pages/Recipe/ViewRecipe");
-const NewRecipe = () => import("@/pages/Recipe/NewRecipe");
-const CustomPage = () => import("@/pages/Recipes/CustomPage");
-const AllRecipes = () => import("@/pages/Recipes/AllRecipes");
-const CategoryTagPage = () => import("@/pages/Recipes/CategoryTagPage");
+const ViewRecipe = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipe/ViewRecipe");
+const NewRecipe = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipe/NewRecipe");
+const CustomPage = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipes/CustomPage");
+const AllRecipes = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipes/AllRecipes");
+const CategoryTagPage = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipes/CategoryTagPage");
 import { api } from "@/api";
 
 export const recipeRoutes = [

frontend/src/store/modules/recipes.js

@@ -41,6 +41,7 @@ const actions = {
     this.commit("setRecentRecipes", hash);
   },
   async requestAllRecipes({ getters }) {
+    console.log("All Recipes");
     const all = getters.getAllRecipes;
     const payload = await api.recipes.allSummary(all.length, 9999);
     const hash = Object.fromEntries([...all, ...payload].map(e => [e.id, e]));